/*
 * Couche "page d'accueil editable"
 * ================================
 *
 * Chargee UNIQUEMENT sur la page qui utilise le gabarit "Accueil pleine
 * largeur". Elle permet de reconstruire la home avec des blocs WordPress
 * standards (titre, paragraphe, liste, groupe) au lieu de HTML fige.
 *
 * Elle fait trois choses :
 *
 *   1. Neutralise les styles de mise en page que WordPress ajoute d'office
 *      aux blocs Groupe, qui sinon contraignent nos grilles.
 *   2. Redessine en CSS les decorations qui etaient du HTML : numeros 01/02/03,
 *      pastilles de la timeline, puces rondes de la liste. Elles deviennent
 *      automatiques, donc ajouter un element ne demande plus de renumeroter.
 *   3. Restyle le bloc "Details" natif de WordPress pour qu'il ressemble a
 *      l'ancien accordeon de FAQ, sans JavaScript.
 */

/* ─────────────────────────────────────────────
   1. Neutralisation des styles de blocs WordPress
   ───────────────────────────────────────────── */

/* WordPress insere un ecart vertical automatique de 24px entre les enfants
   de tout bloc Groupe. On l'annule.
 *
 * ATTENTION A LA SPECIFICITE. Ecrite `.rvc-home :where(...) > *`, cette
 * regle vaut (0,1,0) : autant que `.getlist { margin: 48px auto 0 }` ou
 * `.testi-source { margin-top: 30px }`, et comme ce fichier charge apres,
 * elle gagnait et remettait TOUTES les marges du theme a zero. Resultat :
 * plus aucun espace entre les titres et les blocs qui les suivent.
 *
 * Enveloppee dans :where(), elle retombe a (0,0,0), exactement comme la
 * regle de WordPress qu'elle neutralise. Elle la bat par l'ordre de
 * chargement, et toute regle de classe du theme (0,1,0) la bat a son tour.
 * C'est le seul reglage qui donne le bon ordre de priorite. */
:where(.rvc-home) :where(.is-layout-flow, .is-layout-constrained) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Meme logique sur l'axe horizontal : WordPress contraint la largeur des
   enfants d'un bloc "constrained" et les recentre. C'est ce qui reduisait
   la ligne "Recommandations publiees sur LinkedIn" a 650px au lieu de la
   largeur du conteneur.
   La aussi, tout tient a la specificite : a (0,0,0) cette regle neutralise
   celle de WordPress sans toucher aux largeurs du theme, qui sont posees
   par des classes (.stats-card 760px, .testi-grid 920px...) et valent donc
   (0,1,0). */
:where(.rvc-home) :where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* LA REGLE LA PLUS IMPORTANTE DE CE FICHIER.
 *
 * WordPress enveloppe le contenu de chaque bloc Groupe dans un div
 * supplementaire : <div class="wp-block-group__inner-container">.
 * Consequence : .stats-card, .problem-list et .fit-grid, qui sont des
 * grilles CSS, se retrouvent avec UN SEUL enfant au lieu de trois, et
 * leurs colonnes s'effondrent en une pile verticale.
 *
 * display:contents fait disparaitre cette enveloppe de l'arbre de mise en
 * page, sans la retirer du DOM : ses enfants redeviennent les enfants
 * directs de la grille ou du conteneur flex. Les grilles refonctionnent.
 *
 * Effet de bord utile : la contrainte de largeur que WordPress applique
 * aux enfants d'un bloc "constrained" tombe sur cette enveloppe, qui n'a
 * plus de boite. Elle devient donc sans effet, et les largeurs max du
 * theme (760px, 1000px, 900px...) s'appliquent a nouveau telles quelles. */
.rvc-home .wp-block-group__inner-container { display: contents; }

/* Le bloc Bouton natif impose son propre fond gris et des coins arrondis
   a 9999px, a specificite egale mais plus loin dans la feuille. On reaffirme
   donc l'apparence du theme, ici, ou l'on gagne. */
.rvc-home .wp-block-button__link.primary-btn {
  background-color: #004AAD;
  background-image: none;
  color: #fff;
  border-radius: 6px;
  padding: 14px 32px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
}
.rvc-home .wp-block-button__link.primary-btn:hover { background-color: #003A8C; }
.rvc-home .wp-block-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.rvc-home .wp-block-button { margin: 0; }

/* Pastille orange du bandeau "SaaS B2B a 25k+ de MRR", qui etait un
   <div class="section-dot"> vide. En CSS, le bloc ne contient plus que
   le texte. */
.rvc-home .hero-label-row::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF6B35;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   2. Decorations en CSS plutot qu'en HTML
   ───────────────────────────────────────────── */

/* Numeros 01, 02, 03 de la section Probleme.
   Le compteur se met a jour tout seul si une carte est ajoutee ou retiree. */
.rvc-home .problem-list { counter-reset: probleme; }
.rvc-home .problem-item { counter-increment: probleme; }
.rvc-home .problem-item::before {
  content: "0" counter(probleme);
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #D6E4F7;
  line-height: 1;
}
/* Au-dela de 9 le zero initial n'a plus de sens. */
.rvc-home .problem-item:nth-child(n+10)::before { content: counter(probleme); }

/* Pastille bleue numerotee de la timeline. */
.rvc-home .timeline-3 { counter-reset: etape; }
.rvc-home .timeline-3-item { counter-increment: etape; }
.rvc-home .timeline-3-item::before {
  content: counter(etape);
  position: absolute;
  left: -48px;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #004AAD;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 900;
  z-index: 1;
}

/* Coche blanche sur pastille bleue de la section "Ce que vous obtenez".
 *
 * UN SEUL pseudo-element : la pastille porte la coche en image de fond,
 * centree par `background-position: center`. La version precedente
 * dessinait la coche dans un second pseudo-element cale au pixel pres,
 * ce qui ne pouvait pas tomber juste : une fois pivote de 45 degres, le
 * centre optique d'un chevron ne coincide pas avec le centre de sa boite.
 *
 * Le SVG est celui du template d'origine, a l'identique. */
.rvc-home .get-item { position: relative; padding-left: 68px; }
.rvc-home .get-item::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 26px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #004AAD;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpolyline points='2,6 5,9 10,3' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* ─────────────────────────────────────────────
   3. FAQ : bloc "Details" natif, sans JavaScript
   ───────────────────────────────────────────── */

.rvc-home .faq-list .wp-block-details {
  border-bottom: 1px solid #D6E4F7;
  padding: 0;
}
.rvc-home .faq-list .wp-block-details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: #1A1A2E;
  list-style: none;
}
/* On masque la fleche native du navigateur pour mettre la notre. */
.rvc-home .faq-list .wp-block-details summary::-webkit-details-marker { display: none; }
.rvc-home .faq-list .wp-block-details summary::marker { content: ""; }

/* Chevron dans sa pastille, dessine en CSS. */
.rvc-home .faq-list .wp-block-details summary::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EEF3FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpolyline points='2,4 7,10 12,4' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: background-color .2s, transform .25s;
}
.rvc-home .faq-list .wp-block-details[open] summary::after {
  background-color: #004AAD;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpolyline points='2,4 7,10 12,4' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}
.rvc-home .faq-list .wp-block-details > :not(summary) {
  padding-bottom: 24px;
}
.rvc-home .faq-list .wp-block-details p {
  font-size: 16px;
  color: #4A4F70;
  line-height: 1.75;
}
.rvc-home .faq-list .wp-block-details p + p { margin-top: 16px; }

/* ─────────────────────────────────────────────
   4. Retouches mobiles
   ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .rvc-home .timeline-3-item::before { left: -36px; width: 26px; height: 26px; font-size: 12px; }
  .rvc-home .get-item { padding-left: 60px; }
  .rvc-home .get-item::before { left: 22px; }
  .rvc-home .get-item::after { left: 29px; }
}

/* ─────────────────────────────────────────────
   5. Utilitaires de mise en page
   ───────────────────────────────────────────── */

/* Remplace les style="text-align:center;max-width:700px;margin:0 auto"
   qui etaient ecrits en dur dans le template. En classe, l'editeur ne
   risque pas de les effacer par inadvertance. */
.rvc-home .rvc-center { text-align: center; max-width: 700px; margin: 0 auto; }
.rvc-home .rvc-cta-center { margin-top: 48px; text-align: center; }
.rvc-home .rvc-btnwrap { justify-content: center; }

/* ─────────────────────────────────────────────
   6. Rattrapages de specificite
   ───────────────────────────────────────────── */

/* L'intitule de periode de la timeline etait un <div>. Devenu un <p> dans
   l'editeur, il se fait battre par `.timeline-3-item p` (0,1,1), qui le
   repassait en 15px gris. On le reaffirme avec p.classe (0,2,1). */
.rvc-home p.timeline-3-when {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #004AAD;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  padding-top: 6px;
}

/* ─────────────────────────────────────────────
   7. Garde anti-debordement horizontal
   ───────────────────────────────────────────── */

/* En mobile, le tableau comparatif force une largeur de 470px a l'interieur
   de son conteneur a defilement. Ce conteneur clippe correctement, mais la
   section parente comptabilise quand meme cette largeur dans son
   scrollWidth des lors qu'elle porte les enveloppes de blocs WordPress :
   la page entiere gagne alors ~120px de defilement horizontal parasite.
   (Comportement observe en simulation, cause exacte non isolee.)
   `clip` plutot que `hidden` : il coupe le debordement sans creer de
   conteneur a defilement, donc la colonne figee du tableau, en
   position:sticky, continue de fonctionner. */
.rvc-home section.wp-block-group { overflow-x: clip; }