/* ==========================================================================
   RACINE WEB — MOTIFS DE SECTIONS
   --------------------------------------------------------------------------
   Cinquieme feuille du systeme, chargee apres components.css.
   Elle ne definit que des motifs de mise en page reutilisables, accroches
   aux modules Divi via leur classe CSS (champ « Classe CSS » du module).

   Aucune valeur en dur : tout vient de design-tokens.css.
   Les modules restent des modules Divi natifs, donc editables dans le
   constructeur visuel.
   ========================================================================== */

/* ==========================================================================
   1. RYTHME VERTICAL
   Divi applique 4% de padding vertical par defaut, ce qui varie selon la
   largeur de l'ecran et casse le rythme. On le reprend en main.
   ========================================================================== */

#page-container .rw-section.et_pb_section {
  padding-top: var(--rw-section);
  padding-bottom: var(--rw-section);
}

#page-container .rw-section--tight.et_pb_section {
  padding-top: var(--rw-section-sm);
  padding-bottom: var(--rw-section-sm);
}

#page-container .rw-section--flush-top.et_pb_section { padding-top: 0; }
#page-container .rw-section--flush-bottom.et_pb_section { padding-bottom: 0; }

#page-container .rw-section--alt.et_pb_section { background-color: var(--rw-bg-alt); }
#page-container .rw-section--deep.et_pb_section { background-color: var(--rw-bg-deep); }

/* Largeur de contenu unifiee. Divi laisse les rangees a 80% : trop lache
   sur grand ecran, trop serre sur portable. */
#page-container .rw-section .et_pb_row {
  width: 90%;
  max-width: var(--rw-w-content);
}

#page-container .rw-section--wide .et_pb_row {
  max-width: var(--rw-w-wide);
}

/* ==========================================================================
   2. EN-TETES DE SECTION
   ========================================================================== */

/* Surtitre : petite capitale espacee, jamais criarde. */
#page-container .rw-eyebrow {
  margin-bottom: var(--rw-s-4);
}

#page-container .rw-eyebrow p {
  font-size: var(--rw-fs-small);
  font-weight: var(--rw-fw-semi);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  color: var(--rw-accent);
  margin-bottom: 0;
}

#page-container .rw-section--deep .rw-eyebrow p {
  color: var(--rw-accent-light);
}

/* Titre de section. */
#page-container .rw-title { margin-bottom: var(--rw-s-5); }
#page-container .rw-title h2,
#page-container .rw-title h1 { margin-bottom: 0; }

/* Chapo sous le titre : colonne de lecture bornee. */
#page-container .rw-lead p {
  font-size: var(--rw-fs-lead);
  line-height: var(--rw-lh-lead);
  letter-spacing: var(--rw-ls-lead);
  color: var(--rw-ink-2);
  max-width: var(--rw-w-text);
}

#page-container .rw-section--deep .rw-lead p { color: var(--rw-ink-inv-2); }

/* Chapo centre. */
#page-container .rw-lead--center p { margin-left: auto; margin-right: auto; }

/* Espace apres un en-tete de section avant la grille qui suit. */
#page-container .rw-head-gap { margin-bottom: var(--rw-s-8) !important; }

/* ==========================================================================
   3. HERO
   Le premier ecran doit laisser voir le bouton principal sans defiler.
   ========================================================================== */

#page-container .rw-hero.et_pb_section {
  padding-top: var(--rw-s-9);
  padding-bottom: var(--rw-s-9);
  background-color: var(--rw-bg);
  position: relative;
  overflow: hidden;
}

/* Filet lumineux tres discret dans l'angle superieur droit : le seul
   ornement du premier ecran. Purement decoratif, donc invisible aux
   lecteurs d'ecran et absent a l'impression. */
#page-container .rw-hero.et_pb_section::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 55%;
  padding-bottom: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rw-accent-soft) 0%, transparent 68%);
  opacity: .8;
  pointer-events: none;
  z-index: 0;
}

#page-container .rw-hero .et_pb_row { position: relative; z-index: 1; }

#page-container .rw-hero h1 {
  font-size: var(--rw-fs-display);
  line-height: var(--rw-lh-display);
  letter-spacing: var(--rw-ls-display);
  margin-bottom: var(--rw-s-5);
  max-width: 16ch;
}

#page-container .rw-hero .rw-lead p {
  font-size: var(--rw-fs-lead);
  max-width: 58ch;
  margin-bottom: 0;
}

/* Boutons d'action. Divi pose la classe du module sur le conteneur du
   bouton : on l'utilise pour les aligner cote a cote. */
#page-container .rw-cta-item {
  display: inline-block;
  vertical-align: top;
  margin-top: var(--rw-s-7);
  margin-right: var(--rw-s-4);
  margin-bottom: 0;
}
#page-container .rw-cta-item:last-of-type { margin-right: 0; }

/* Bouton secondaire. components.css cible le lien (.et_pb_button.rw-btn-ghost) ;
   selon le module, Divi pose la classe sur le conteneur. On couvre les deux,
   cette feuille etant chargee apres components.css. */
#page-container .rw-btn-ghost .et_pb_button {
  background-color: transparent;
  color: var(--rw-accent);
  border-color: var(--rw-border-ui);
}
#page-container .rw-btn-ghost .et_pb_button:hover {
  background-color: var(--rw-accent-soft);
  border-color: var(--rw-accent);
  color: var(--rw-accent-hover);
}
#page-container .rw-section--deep .rw-btn-ghost .et_pb_button {
  background-color: transparent;
  color: var(--rw-ink-inv);
  border-color: rgba(255,255,255,.42);
}
#page-container .rw-section--deep .rw-btn-ghost .et_pb_button:hover {
  background-color: rgba(255,255,255,.10);
  border-color: var(--rw-ink-inv);
  color: var(--rw-ink-inv);
}

/* Bandeau de reassurance sous les boutons. */
#page-container .rw-hero-note p {
  font-size: var(--rw-fs-small);
  letter-spacing: var(--rw-ls-body);
  color: var(--rw-ink-2);
  margin-top: var(--rw-s-5);
  margin-bottom: 0;
}

/* ==========================================================================
   4. CARTES
   Motif partage par « 3 situations », « expertises » et « pourquoi moi ».
   ========================================================================== */

#page-container .rw-card {
  background: var(--rw-bg);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r-lg);
  padding: var(--rw-s-7);
  height: 100%;
  transition: border-color var(--rw-t) var(--rw-ease),
              box-shadow var(--rw-t) var(--rw-ease),
              transform var(--rw-t) var(--rw-ease);
}

#page-container .rw-card:hover {
  border-color: var(--rw-line-strong);
  box-shadow: var(--rw-shadow);
  transform: translateY(-2px);
}

#page-container .rw-section--alt .rw-card { background: var(--rw-bg); }

#page-container .rw-card .et_pb_module_header,
#page-container .rw-card h3 {
  font-size: var(--rw-fs-h3);
  margin-bottom: var(--rw-s-3);
}

#page-container .rw-card .et_pb_blurb_description,
#page-container .rw-card p {
  color: var(--rw-ink-2);
}

/* Carte sur fond sombre. */
#page-container .rw-card--inv {
  background: rgba(255,255,255,.04);
  border-color: var(--rw-line-inv);
}
#page-container .rw-card--inv:hover {
  border-color: rgba(255,255,255,.28);
  box-shadow: none;
}

/* Les colonnes d'une grille de cartes s'etirent a la meme hauteur. */
#page-container .rw-grid.et_pb_row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#page-container .rw-grid.et_pb_row > .et_pb_column {
  display: flex;
  flex-direction: column;
}
#page-container .rw-grid.et_pb_row > .et_pb_column > .et_pb_module { flex: 1 1 auto; }

/* Le lien d'action, dernier paragraphe a l'interieur de la carte. */
#page-container .rw-card-link {
  margin-top: var(--rw-s-5);
  margin-bottom: 0;
  font-size: var(--rw-fs-body);
  font-weight: var(--rw-fw-medium);
}

#page-container .rw-card-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--rw-s-2);
  text-decoration: none !important;
}

#page-container .rw-card-link a::after {
  content: "\2192";                      /* fleche vers la droite */
  transition: transform var(--rw-t-fast) var(--rw-ease);
}

#page-container .rw-card-link a:hover::after { transform: translateX(4px); }

/* ==========================================================================
   5. LISTE DE PROBLEMES  (section « Ca vous parle ? »)
   Des phrases de dirigeant, pas des arguments commerciaux.
   ========================================================================== */

#page-container .rw-quotes ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rw-s-4) var(--rw-s-7);
}

#page-container .rw-quotes li {
  position: relative;
  padding: var(--rw-s-5) 0 var(--rw-s-5) var(--rw-s-7);
  border-bottom: 1px solid var(--rw-line);
  font-size: var(--rw-fs-lead);
  line-height: var(--rw-lh-lead);
  letter-spacing: var(--rw-ls-lead);
  color: var(--rw-ink);
}

/* Le guillemet ouvrant tient lieu de puce. */
#page-container .rw-quotes li::before {
  content: "\00AB";
  position: absolute;
  left: 0;
  top: var(--rw-s-5);
  font-size: var(--rw-fs-h3);
  line-height: 1.1;
  color: var(--rw-accent);
  font-weight: var(--rw-fw-bold);
}

/* ==========================================================================
   6. METHODE  (les cinq etapes numerotees)
   ========================================================================== */

#page-container .rw-step {
  border-top: 2px solid var(--rw-line);
  padding-top: var(--rw-s-5);
  height: 100%;
  transition: border-color var(--rw-t) var(--rw-ease);
}

#page-container .rw-step:hover { border-top-color: var(--rw-accent); }

#page-container .rw-step .et_pb_module_header,
#page-container .rw-step h3 {
  font-size: var(--rw-fs-h3);
  margin-bottom: var(--rw-s-3);
}

/* Le numero de l'etape, place en tete du titre du module sous la forme
   « 01 — Comprendre », se distingue par sa couleur. */
#page-container .rw-step .rw-num {
  display: block;
  font-size: var(--rw-fs-small);
  font-weight: var(--rw-fw-semi);
  letter-spacing: var(--rw-ls-label);
  color: var(--rw-accent);
  margin-bottom: var(--rw-s-2);
}

#page-container .rw-step .et_pb_blurb_description,
#page-container .rw-step p { color: var(--rw-ink-2); }

/* ==========================================================================
   7. SECTION SECOND AVIS  (fond sombre, forte, jamais agressive)
   ========================================================================== */

#page-container .rw-section--deep h2,
#page-container .rw-section--deep h3,
#page-container .rw-section--deep .et_pb_module_header { color: var(--rw-ink-inv); }

#page-container .rw-section--deep p,
#page-container .rw-section--deep li { color: var(--rw-ink-inv-2); }

/* Liste des points analyses, sur deux colonnes. */
#page-container .rw-checklist ul {
  list-style: none;
  padding-left: 0;
  margin: var(--rw-s-5) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rw-s-3) var(--rw-s-6);
}

#page-container .rw-checklist li {
  position: relative;
  padding-left: var(--rw-s-6);
  font-size: var(--rw-fs-body);
  line-height: var(--rw-lh-body);
}

#page-container .rw-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 16px;
  height: 8px;
  border-left: 2px solid var(--rw-accent);
  border-bottom: 2px solid var(--rw-accent);
  transform: rotate(-45deg);
}

#page-container .rw-section--deep .rw-checklist li::before { border-color: var(--rw-accent-light); }

/* ==========================================================================
   8. TARIFS
   ========================================================================== */

#page-container .rw-price {
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r-lg);
  padding: var(--rw-s-7);
  height: 100%;
  background: var(--rw-bg);
}

#page-container .rw-price .et_pb_module_header,
#page-container .rw-price h3 {
  font-size: var(--rw-fs-body);
  font-weight: var(--rw-fw-semi);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  color: var(--rw-ink-2);
  margin-bottom: var(--rw-s-4);
}

/* Le montant, place dans la description sous la forme
   <span class="rw-amount">75 €</span><span class="rw-unit">HT / heure</span> */
#page-container .rw-amount {
  display: block;
  font-size: var(--rw-fs-h2);
  font-weight: var(--rw-fw-bold);
  letter-spacing: var(--rw-ls-h2);
  line-height: 1.1;
  color: var(--rw-ink);
}

#page-container .rw-unit {
  display: block;
  font-size: var(--rw-fs-small);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  color: var(--rw-ink-2);
  margin-top: var(--rw-s-2);
}

/* Carte mise en avant : la premiere analyse. */
#page-container .rw-price--featured {
  border-color: var(--rw-accent);
  border-width: 2px;
}

/* ==========================================================================
   9. EMPLACEMENTS A COMPLETER
   Rendus visibles et explicites : ils ne doivent jamais passer pour du
   contenu definitif, et ils sont retires du site public tant qu'ils sont
   vides (classe posee sur la section).
   ========================================================================== */

#page-container .rw-placeholder {
  border: 1px dashed var(--rw-line-strong);
  border-radius: var(--rw-r);
  padding: var(--rw-s-7);
  background: var(--rw-bg-alt);
  text-align: center;
}

#page-container .rw-placeholder p {
  color: var(--rw-ink-2);
  font-size: var(--rw-fs-small);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  margin-bottom: 0;
}

/* Portrait a fournir : garde le bon rapport pour eviter tout decalage
   de mise en page le jour ou la photo arrive (CLS). */
#page-container .rw-portrait-slot {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   10. ANIMATIONS D'APPARITION
   Tres legeres, et entierement neutralisees par le bloc
   prefers-reduced-motion de base.css.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  #page-container .rw-reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: rw-reveal-in var(--rw-t-slow) var(--rw-ease) forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }

  @keyframes rw-reveal-in {
    to { opacity: 1; transform: none; }
  }

  /* Navigateurs sans animation-timeline : le contenu reste visible. */
  @supports not (animation-timeline: view()) {
    #page-container .rw-reveal { opacity: 1; transform: none; animation: none; }
  }
}

/* ==========================================================================
   11. ADAPTATIONS
   ========================================================================== */

@media (max-width: 980px) {
  #page-container .rw-hero h1 { max-width: 100%; }

  #page-container .rw-quotes ul,
  #page-container .rw-checklist ul {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-container .rw-card,
  #page-container .rw-price { padding: var(--rw-s-6); }
}

@media (max-width: 734px) {
  #page-container .rw-section.et_pb_section {
    padding-top: var(--rw-section);
    padding-bottom: var(--rw-section);
  }

  /* Les boutons prennent toute la largeur et s'empilent. */
  #page-container .rw-cta-item {
    display: block;
    margin-right: 0;
    margin-top: var(--rw-s-4);
  }

  #page-container .rw-quotes li { font-size: var(--rw-fs-body); }

  /* Les cartes n'ont plus besoin de s'etirer une fois empilees. */
  #page-container .rw-grid.et_pb_row { display: block; }
  #page-container .rw-grid.et_pb_row > .et_pb_column { display: block; }
}

/* ==========================================================================
   12. PAGES LEGALES
   Colonne de lecture etroite, hierarchie lisible, aucun effet.
   ========================================================================== */

#page-container .rw-legal { max-width: var(--rw-w-text); }

#page-container .rw-legal h2 {
  font-size: var(--rw-fs-h3);
  margin-top: var(--rw-s-8);
  margin-bottom: var(--rw-s-4);
}
#page-container .rw-legal h2:first-child { margin-top: 0; }

#page-container .rw-legal ul {
  margin: 0 0 var(--rw-s-5) var(--rw-s-5);
}
#page-container .rw-legal li { margin-bottom: var(--rw-s-2); }

/* Renseignement manquant : signale clairement, jamais confondu avec du
   contenu definitif. Contraste verifie : 7.4:1. */
#page-container .rw-todo {
  background: #FFF3CD;
  color: #5C4700;
  padding: 2px 8px;
  border-radius: var(--rw-r-sm);
  font-size: var(--rw-fs-small);
  font-weight: var(--rw-fw-medium);
}

/* ==========================================================================
   13. ACCESSIBILITE
   ========================================================================== */

/* Lien d'evitement : hors ecran jusqu'a recevoir le focus clavier. */
#page-container .rw-evitement,
.rw-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: var(--rw-s-3) var(--rw-s-5);
  background: var(--rw-accent);
  color: var(--rw-accent-on);
  font-family: var(--rw-font);
  font-size: var(--rw-fs-body);
  font-weight: var(--rw-fw-medium);
  text-decoration: none;
  border-radius: 0 0 var(--rw-r) 0;
}

.rw-evitement:focus,
.rw-evitement:focus-visible {
  left: 0;
  outline: 3px solid var(--rw-ink);
  outline-offset: -3px;
}

/* La cible du lien d'evitement ne doit jamais decaler la mise en page. */
#rw-contenu {
  display: block;
  height: 0;
  overflow: hidden;
}