/* ==========================================================================
   RACINE WEB — VISUELS
   --------------------------------------------------------------------------
   Sixieme feuille du systeme, chargee en dernier avant responsive.css.

   Aucune photographie, aucune illustration generique. Les visuels sont des
   constructions geometriques qui representent ce dont parle le texte :
   la pile technique d'un site, un flux de donnees, une progression, une
   sortie de diagnostic.

   Trois principes tenus partout :
   - un seul accent, le bleu du logo ;
   - la profondeur vient d'ombres superposees, jamais d'un degrade criard ;
   - tout mouvement est neutralise par prefers-reduced-motion (base.css).
   ========================================================================== */

/* ==========================================================================
   1. PICTOGRAMMES
   Pastille en degrade tres contenu, trace fin, et un liseret clair en haut
   qui simule une source de lumiere unique.
   ========================================================================== */

#page-container .rw-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--rw-s-5);
  border-radius: 15px;
  flex: 0 0 auto;

  color: var(--rw-accent);
  background:
    linear-gradient(160deg, #FFFFFF 0%, var(--rw-accent-soft) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(10,19,48,.06),
    0 8px 18px -10px rgba(0,53,173,.35);

  transition:
    transform var(--rw-t) var(--rw-ease),
    box-shadow var(--rw-t) var(--rw-ease);
}

/* Le liseret exterieur : 1px de bleu tres dilue, pas une bordure pleine. */
#page-container .rw-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(0,53,173,.14);
  pointer-events: none;
}

#page-container .rw-icon svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}

#page-container .rw-card:hover .rw-icon {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(10,19,48,.07),
    0 14px 26px -12px rgba(0,53,173,.48);
}

/* Sur fond sombre : verre depoli plutot que degrade clair. */
#page-container .rw-section--deep .rw-icon {
  color: var(--rw-accent-light);
  background: linear-gradient(160deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 24px -14px rgba(0,0,0,.7);
}
#page-container .rw-section--deep .rw-icon::after { border-color: rgba(255,255,255,.14); }

/* ==========================================================================
   2. CARTES : relief et liseret d'accent
   Une ligne d'accent apparait en haut de la carte au survol. Elle part du
   centre : le mouvement est plus doux qu'un balayage lateral.
   ========================================================================== */

#page-container .rw-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%);
  box-shadow: 0 1px 2px rgba(10,19,48,.04);
}

#page-container .rw-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--rw-accent) 22%, var(--rw-accent) 78%, transparent);
  transform: translateX(-50%);
  transition: width var(--rw-t) var(--rw-ease);
}

#page-container .rw-card:hover::before { width: 100%; }

#page-container .rw-card:hover {
  box-shadow:
    0 2px 4px rgba(10,19,48,.05),
    0 22px 44px -24px rgba(10,19,48,.34);
}

/* ==========================================================================
   3. LE PREMIER ECRAN : LA PILE TECHNIQUE
   Un cadre de fenetre sobre, la pile des couches d'un site a l'interieur,
   et un marqueur qui designe la couche ou se trouve reellement la cause.
   ========================================================================== */

#page-container .rw-stack {
  position: relative;
  border-radius: var(--rw-r-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 100%);
  box-shadow:
    0 1px 2px rgba(10,19,48,.05),
    0 30px 60px -30px rgba(10,19,48,.34),
    0 0 0 1px rgba(10,19,48,.06);
  overflow: hidden;
}

/* Barre de fenetre : trois pastilles et un libelle, rien de plus. */
#page-container .rw-stack-barre {
  display: flex;
  align-items: center;
  gap: var(--rw-s-2);
  padding: var(--rw-s-4) var(--rw-s-5);
  border-bottom: 1px solid var(--rw-line);
  background: rgba(255,255,255,.7);
}

#page-container .rw-stack-pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rw-line-strong);
  flex: 0 0 auto;
}

#page-container .rw-stack-titre {
  margin-left: var(--rw-s-3);
  font-size: var(--rw-fs-small);
  font-weight: var(--rw-fw-medium);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  color: var(--rw-ink-2);
}

#page-container .rw-stack-corps {
  position: relative;
  padding: var(--rw-s-6) var(--rw-s-5) var(--rw-s-5);
}

/* Trame de fond : une grille de points, a peine perceptible. */
#page-container .rw-stack-corps::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10,19,48,.08) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .55;
  pointer-events: none;
}

#page-container .rw-couches {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--rw-s-3);
}

#page-container .rw-couche {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rw-s-4);
  padding: var(--rw-s-4) var(--rw-s-5);
  border-radius: var(--rw-r);
  background: #FFFFFF;
  box-shadow:
    0 1px 2px rgba(10,19,48,.05),
    0 0 0 1px rgba(10,19,48,.05);
  /* Le decalage croissant donne la profondeur de la pile. */
  margin-left: calc(var(--i) * 16px);
  transition:
    transform var(--rw-t) var(--rw-ease),
    box-shadow var(--rw-t) var(--rw-ease);
}

/* Le trait vertical qui relie les couches entre elles. */
#page-container .rw-couche::before {
  content: "";
  position: absolute;
  left: calc(var(--rw-s-5) * -1 + 8px);
  top: 50%;
  bottom: calc(var(--rw-s-3) * -1 - 50%);
  width: 1px;
  background: var(--rw-line-strong);
  opacity: .8;
}
#page-container .rw-couche:last-of-type::before { display: none; }

#page-container .rw-couche:hover {
  transform: translateX(-8px);
  box-shadow:
    0 2px 4px rgba(10,19,48,.06),
    0 0 0 1px var(--rw-accent),
    0 16px 30px -18px rgba(0,53,173,.4);
}

#page-container .rw-couche-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

#page-container .rw-couche-nom {
  font-size: var(--rw-fs-body);
  font-weight: var(--rw-fw-semi);
  letter-spacing: var(--rw-ls-body);
  color: var(--rw-ink);
  line-height: 1.3;
}

#page-container .rw-couche-detail {
  font-size: var(--rw-fs-small);
  letter-spacing: var(--rw-ls-body);
  color: var(--rw-ink-2);
  line-height: 1.4;
}

/* Jauge : trois segments qui figurent la profondeur, sans chiffrer quoi que
   ce soit. Purement structurel, donc masque aux lecteurs d'ecran. */
#page-container .rw-couche-jauge {
  display: flex;
  gap: 3px;
  flex: 0 0 auto;
}

#page-container .rw-couche-jauge i {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--rw-line);
}

/* nth-child n'accepte pas var() : le segment actif porte sa propre classe. */
#page-container .rw-couche-jauge i.on { background: var(--rw-accent); }

/* La couche designee comme cause probable. */
#page-container .rw-couche--cause {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--rw-accent-soft) 100%);
  box-shadow:
    0 2px 4px rgba(10,19,48,.06),
    0 0 0 1.5px var(--rw-accent),
    0 18px 34px -20px rgba(0,53,173,.5);
}

#page-container .rw-couche-marque {
  position: absolute;
  right: var(--rw-s-5);
  top: calc(var(--rw-s-4) * -1 - 2px);
  padding: 3px 10px;
  border-radius: var(--rw-r-pill);
  background: var(--rw-accent);
  color: var(--rw-accent-on);
  font-size: 11px;
  font-weight: var(--rw-fw-semi);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(0,53,173,.7);
}

#page-container .rw-stack-note {
  position: relative;
  z-index: 1;
  margin: var(--rw-s-6) 0 0 !important;
  padding-top: var(--rw-s-4);
  border-top: 1px solid var(--rw-line);
  font-size: var(--rw-fs-small);
  letter-spacing: var(--rw-ls-body);
  color: var(--rw-ink-2);
}

/* Le balayage vertical : une seule passe lente, discrete. */
@media (prefers-reduced-motion: no-preference) {
  #page-container .rw-stack-corps::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg,
      transparent, rgba(0,53,173,.055) 45%, rgba(0,53,173,.055) 55%, transparent);
    animation: rw-balayage 7s var(--rw-ease) infinite;
    pointer-events: none;
  }

  @keyframes rw-balayage {
    0%, 12%  { top: -120px; opacity: 0; }
    22%      { opacity: 1; }
    78%      { opacity: 1; }
    88%, 100%{ top: 100%; opacity: 0; }
  }
}

/* ==========================================================================
   4. FLUX DE DONNEES
   Deux blocs relies par des courbes SVG, avec le sens de circulation.
   ========================================================================== */

#page-container .rw-flux {
  position: relative;
  padding: var(--rw-s-7);
  border-radius: var(--rw-r-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 100%);
  box-shadow:
    0 1px 2px rgba(10,19,48,.05),
    0 26px 54px -30px rgba(10,19,48,.3),
    0 0 0 1px rgba(10,19,48,.06);
}

#page-container .rw-flux-grille {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--rw-s-4);
}

#page-container .rw-flux-bloc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--rw-s-5);
  border-radius: var(--rw-r);
  background: #FFFFFF;
  text-align: center;
  box-shadow: 0 1px 2px rgba(10,19,48,.05), 0 0 0 1px rgba(10,19,48,.07);
}

#page-container .rw-flux-bloc--shop {
  box-shadow:
    0 1px 2px rgba(10,19,48,.05),
    0 0 0 1.5px var(--rw-accent),
    0 16px 30px -20px rgba(0,53,173,.45);
}

#page-container .rw-flux-titre {
  font-size: var(--rw-fs-h3);
  font-weight: var(--rw-fw-semi);
  letter-spacing: var(--rw-ls-h3);
  color: var(--rw-ink);
}

#page-container .rw-flux-sous {
  font-size: var(--rw-fs-small);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  color: var(--rw-ink-2);
}

/* Les deux courbes. */
#page-container .rw-flux-liens {
  position: relative;
  width: 168px;
  height: 128px;
  flex: 0 0 auto;
}

#page-container .rw-flux-liens svg { width: 100%; height: 100%; overflow: visible; }

#page-container .rw-flux-trace {
  fill: none;
  stroke: var(--rw-accent);
  stroke-width: 1.5;
  opacity: .5;
}

#page-container .rw-flux-mobile {
  fill: none;
  stroke: var(--rw-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 5 150;
}

@media (prefers-reduced-motion: no-preference) {
  #page-container .rw-flux-mobile { animation: rw-circule 3.4s linear infinite; }
  #page-container .rw-flux-mobile--retour { animation-direction: reverse; animation-delay: 1.7s; }
  @keyframes rw-circule { to { stroke-dashoffset: -155; } }
}

#page-container .rw-flux-etiquette {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: var(--rw-r-pill);
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(10,19,48,.08), 0 4px 10px -6px rgba(10,19,48,.35);
  font-size: 11px;
  font-weight: var(--rw-fw-medium);
  letter-spacing: var(--rw-ls-body);
  color: var(--rw-ink-2);
  white-space: nowrap;
}

#page-container .rw-flux-etiquette--haut { top: 6px; }
#page-container .rw-flux-etiquette--bas  { bottom: 6px; }

#page-container .rw-flux-note {
  margin: var(--rw-s-6) 0 0 !important;
  padding-top: var(--rw-s-4);
  border-top: 1px solid var(--rw-line);
  font-size: var(--rw-fs-small);
  color: var(--rw-ink-2);
  text-align: center;
}

/* ==========================================================================
   5. SORTIE DE DIAGNOSTIC
   Un terminal sobre. Les commandes sont reelles et generiques : aucune
   donnee client, aucun resultat chiffre invente.
   ========================================================================== */

#page-container .rw-term {
  border-radius: var(--rw-r-lg);
  overflow: hidden;
  background: #0A1330;
  box-shadow:
    0 1px 2px rgba(10,19,48,.1),
    0 30px 60px -30px rgba(10,19,48,.6);
}

#page-container .rw-term-barre {
  display: flex;
  align-items: center;
  gap: var(--rw-s-2);
  padding: var(--rw-s-3) var(--rw-s-5);
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#page-container .rw-term-barre .rw-stack-pastille { background: rgba(255,255,255,.22); }

#page-container .rw-term-titre {
  margin-left: var(--rw-s-3);
  font-size: var(--rw-fs-small);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  color: var(--rw-ink-inv-2);
}

#page-container .rw-term-corps {
  margin: 0;
  padding: var(--rw-s-5);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--rw-ink-inv-2);
  overflow-x: auto;
}

#page-container .rw-term-corps .l { display: block; white-space: pre; }
#page-container .rw-term-corps .p { color: var(--rw-accent-light); }   /* invite */
#page-container .rw-term-corps .c { color: #FFFFFF; }                  /* commande */
#page-container .rw-term-corps .o { color: rgba(255,255,255,.55); }    /* sortie */
#page-container .rw-term-corps .k { color: #7FE0B0; }                  /* resultat */

/* Le curseur ne clignote que si l'utilisateur l'accepte. */
#page-container .rw-term-curseur {
  display: inline-block;
  width: 8px;
  height: 15px;
  vertical-align: -2px;
  background: var(--rw-accent-light);
}

@media (prefers-reduced-motion: no-preference) {
  #page-container .rw-term-curseur { animation: rw-curseur 1.15s steps(2) infinite; }
  @keyframes rw-curseur { 50% { opacity: 0; } }
}

/* ==========================================================================
   6. METHODE : progression reliee
   ========================================================================== */

#page-container .rw-step {
  position: relative;
  border-top: 0;
  padding-top: var(--rw-s-7);
}

#page-container .rw-step::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: calc(var(--rw-s-5) * -1);
  height: 1px;
  background: linear-gradient(90deg, var(--rw-accent) 0%, var(--rw-line) 65%);
  opacity: .55;
}

#page-container .rw-step::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rw-bg);
  box-shadow: 0 0 0 2px var(--rw-accent), 0 0 0 5px rgba(0,53,173,.12);
  transition: background var(--rw-t) var(--rw-ease), box-shadow var(--rw-t) var(--rw-ease);
}

#page-container .rw-step:hover::after {
  background: var(--rw-accent);
  box-shadow: 0 0 0 2px var(--rw-accent), 0 0 0 7px rgba(0,53,173,.2);
}

#page-container .rw-grid .et_pb_column:last-child .rw-step::before { right: 0; }
#page-container .rw-section--alt .rw-step::after { background: var(--rw-bg-alt); }

/* ==========================================================================
   7. FONDS DE SECTION
   Trames tres discretes : elles donnent de la matiere sans jamais concurrencer
   le texte pose dessus.
   ========================================================================== */

#page-container .rw-section--alt.et_pb_section {
  position: relative;
  background-image: radial-gradient(circle, rgba(10,19,48,.055) 1px, transparent 1px);
  background-size: 22px 22px;
}

#page-container .rw-section--deep.et_pb_section {
  position: relative;
  overflow: hidden;
}

/* Halo bleu dans l'angle : la seule source de lumiere des sections sombres. */
#page-container .rw-section--deep.et_pb_section::before {
  content: "";
  position: absolute;
  top: -45%;
  left: -12%;
  width: 62%;
  padding-bottom: 62%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,53,173,.55) 0%, transparent 66%);
  pointer-events: none;
}

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

/* ==========================================================================
   8. ADAPTATIONS
   ========================================================================== */

@media (max-width: 980px) {
  #page-container .rw-couche { margin-left: calc(var(--i) * 9px); }
  #page-container .rw-flux-liens { width: 120px; }
}

@media (max-width: 734px) {
  /* La pile se redresse : le decalage perd son sens sur une colonne. */
  #page-container .rw-couche { margin-left: 0; }
  #page-container .rw-couche::before { left: 14px; }
  #page-container .rw-couche:hover { transform: none; }
  #page-container .rw-couche-marque { right: var(--rw-s-4); }

  /* Le flux s'empile : les courbes cedent la place a un trait vertical. */
  #page-container .rw-flux { padding: var(--rw-s-5); }
  #page-container .rw-flux-grille { grid-template-columns: minmax(0, 1fr); }
  #page-container .rw-flux-liens {
    width: 100%;
    height: 96px;
    transform: rotate(90deg) scale(.72);
  }

  #page-container .rw-icon { width: 46px; height: 46px; margin-bottom: var(--rw-s-4); }
  #page-container .rw-icon svg { width: 22px; height: 22px; }

  #page-container .rw-term-corps { font-size: 12.5px; padding: var(--rw-s-4); }

  /* Le filet de progression devient vertical. */
  #page-container .rw-step::before {
    top: 18px;
    bottom: calc(var(--rw-s-6) * -1);
    left: 6px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--rw-accent) 0%, var(--rw-line) 70%);
  }
}

/* ==========================================================================
   9. PLACEMENT DES VISUELS DANS LES COLONNES
   ========================================================================== */

#page-container .rw-hero-visuel { margin-top: var(--rw-s-4); }
#page-container .rw-visuel { margin-top: var(--rw-s-2); }

@media (max-width: 980px) {
  /* En colonne unique, le visuel respire davantage au-dessus. */
  #page-container .rw-hero-visuel,
  #page-container .rw-visuel { margin-top: var(--rw-s-8); }
}

/* ==========================================================================
   10. ETUDES DE CAS
   Page de lecture : colonne etroite, sections numerotees, bandeau de
   caracteristiques en tete.
   ========================================================================== */

#page-container .rw-cas {
  max-width: var(--rw-w-text);
  margin: 0 auto;
  padding: var(--rw-section-sm) 0;
}

/* Bandeau : client, technologies, duree. */
#page-container .rw-cas-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rw-s-7);
  margin: 0 0 var(--rw-s-8);
  padding-bottom: var(--rw-s-6);
  border-bottom: 1px solid var(--rw-line);
}

#page-container .rw-cas-meta dt {
  font-size: var(--rw-fs-small);
  font-weight: var(--rw-fw-semi);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  color: var(--rw-ink-2);
  margin-bottom: 3px;
}

#page-container .rw-cas-meta dd {
  margin: 0;
  font-size: var(--rw-fs-body);
  font-weight: var(--rw-fw-medium);
  letter-spacing: var(--rw-ls-body);
  color: var(--rw-ink);
}

#page-container .rw-cas-bloc { margin-bottom: var(--rw-s-8); }

#page-container .rw-cas-bloc h2 {
  font-size: var(--rw-fs-h3);
  margin-bottom: var(--rw-s-4);
}

#page-container .rw-cas-bloc .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-cas-retour {
  margin-top: var(--rw-s-9);
  padding-top: var(--rw-s-5);
  border-top: 1px solid var(--rw-line);
  font-weight: var(--rw-fw-medium);
}

#page-container .rw-cas-retour a { text-decoration: none !important; }
#page-container .rw-cas-retour a::before { content: "\2190"; margin-right: var(--rw-s-2); }

/* ---- Liste des etudes sur /realisations/ ------------------------------- */

#page-container .rw-cas-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--rw-s-5);
}

#page-container .rw-cas-carte {
  display: flex;
  flex-direction: column;
  gap: var(--rw-s-3);
  padding: var(--rw-s-7);
  border-radius: var(--rw-r-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%);
  box-shadow: 0 1px 2px rgba(10,19,48,.05), 0 0 0 1px var(--rw-line);
  text-decoration: none !important;
  transition:
    transform var(--rw-t) var(--rw-ease),
    box-shadow var(--rw-t) var(--rw-ease);
}

#page-container .rw-cas-carte:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(10,19,48,.05),
    0 0 0 1px var(--rw-accent),
    0 22px 44px -24px rgba(10,19,48,.34);
}

#page-container .rw-cas-techno {
  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);
}

#page-container .rw-cas-carte h3 {
  font-size: var(--rw-fs-h3);
  margin: 0;
  color: var(--rw-ink);
}

#page-container .rw-cas-carte p {
  margin: 0;
  color: var(--rw-ink-2);
  flex: 1 1 auto;
}

#page-container .rw-cas-lire {
  display: inline-flex;
  align-items: center;
  gap: var(--rw-s-2);
  margin-top: var(--rw-s-3);
  font-weight: var(--rw-fw-medium);
  color: var(--rw-accent);
}

#page-container .rw-cas-lire::after {
  content: "\2192";
  transition: transform var(--rw-t-fast) var(--rw-ease);
}

#page-container .rw-cas-carte:hover .rw-cas-lire::after { transform: translateX(4px); }

@media (max-width: 734px) {
  #page-container .rw-cas-meta { gap: var(--rw-s-5); }
  #page-container .rw-cas-carte { padding: var(--rw-s-6); }
}

/* ==========================================================================
   11. LOGOS DES TECHNOLOGIES
   Marques de WordPress Foundation et PrestaShop SA, reprises a titre
   descriptif. Monochromes : elles prennent la couleur du texte, ce qui evite
   la juxtaposition de deux bleus concurrents du bleu de la marque.
   ========================================================================== */

#page-container .rw-technos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rw-s-7);
  padding: var(--rw-s-6) 0;
}

#page-container .rw-techno {
  display: inline-flex;
  align-items: center;
  gap: var(--rw-s-3);
  color: var(--rw-ink-2);
  transition: color var(--rw-t) var(--rw-ease);
}

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

#page-container .rw-techno svg {
  height: 34px;
  width: auto;
  fill: currentColor;
}

/* Le logo WordPress est un disque : il a besoin d'un peu moins de hauteur
   pour paraitre de la meme taille optique que le logotype PrestaShop. */
#page-container .rw-techno--wordpress svg { height: 30px; }

#page-container .rw-techno-nom {
  font-size: var(--rw-fs-small);
  font-weight: var(--rw-fw-semi);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
}

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

/* ==========================================================================
   12. LOGOS DE REFERENCE
   Les logos clients gardent leurs couleurs : les neutraliser reviendrait a
   alterer une marque. Ils sont poses sur une carte neutre.
   ========================================================================== */

#page-container .rw-ref-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 62px;
  margin-bottom: var(--rw-s-5);
}

#page-container .rw-ref-logo img {
  max-height: 62px;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: var(--rw-r-sm);
  object-fit: contain;
}

/* Sans logo disponible : un bloc de meme hauteur, pour que les cartes
   d'une meme rangee restent alignees. */
#page-container .rw-ref-logo--vide {
  align-items: center;
  border-radius: var(--rw-r-sm);
  background: var(--rw-bg-alt);
  padding: 0 var(--rw-s-5);
  font-size: var(--rw-fs-small);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  color: var(--rw-ink-2);
}

@media (max-width: 734px) {
  #page-container .rw-technos { gap: var(--rw-s-5); }
  #page-container .rw-techno svg { height: 28px; }
  #page-container .rw-techno--wordpress svg { height: 25px; }
}

/* ==========================================================================
   13. PAGE DE DEPOT D'IMAGES
   Page de travail, pas une page publique : sobre, dense, lisible.
   ========================================================================== */

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

#page-container .rw-depot-avis {
  padding: var(--rw-s-4) var(--rw-s-5);
  border-radius: var(--rw-r);
  margin-bottom: var(--rw-s-4) !important;
  font-weight: var(--rw-fw-medium);
}

#page-container .rw-depot-avis--ok {
  background: #E7F5EC;
  color: #17603A;
  box-shadow: inset 0 0 0 1px #A9D8BE;
}

#page-container .rw-depot-avis--ko {
  background: #FDECEA;
  color: #8B1F17;
  box-shadow: inset 0 0 0 1px #F0B7B1;
}

#page-container .rw-depot--ferme p {
  padding: var(--rw-s-6);
  border: 1px dashed var(--rw-line-strong);
  border-radius: var(--rw-r);
  background: var(--rw-bg-alt);
}

/* ---- Zone de depot ------------------------------------------------------ */

#page-container .rw-depot-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rw-s-2);
  padding: var(--rw-s-9) var(--rw-s-6);
  border: 2px dashed var(--rw-line-strong);
  border-radius: var(--rw-r-lg);
  background: var(--rw-bg-alt);
  cursor: pointer;
  text-align: center;
  transition:
    border-color var(--rw-t) var(--rw-ease),
    background var(--rw-t) var(--rw-ease);
}

#page-container .rw-depot-zone:hover,
#page-container .rw-depot-zone.survol {
  border-color: var(--rw-accent);
  background: var(--rw-accent-soft);
}

#page-container .rw-depot-zone-titre {
  font-size: var(--rw-fs-h3);
  font-weight: var(--rw-fw-semi);
  letter-spacing: var(--rw-ls-h3);
  color: var(--rw-ink);
}

#page-container .rw-depot-zone-note {
  font-size: var(--rw-fs-small);
  color: var(--rw-ink-2);
}

/* Le champ natif est masque : la zone entiere sert de bouton. */
#page-container .rw-depot-zone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* Mais il doit rester atteignable au clavier. */
#page-container .rw-depot-zone input[type="file"]:focus-visible + .rw-depot-choix,
#page-container .rw-depot-zone:focus-within {
  outline: 3px solid var(--rw-accent);
  outline-offset: 3px;
  border-radius: var(--rw-r-lg);
}

#page-container .rw-depot-choix {
  font-size: var(--rw-fs-small);
  font-weight: var(--rw-fw-medium);
  color: var(--rw-accent);
  word-break: break-all;
}

#page-container .rw-depot-form button { margin-top: var(--rw-s-5); }

/* ---- Liste des fichiers ------------------------------------------------- */

#page-container .rw-depot-titre {
  margin-top: var(--rw-s-8) !important;
  padding-top: var(--rw-s-6);
  border-top: 1px solid var(--rw-line);
}
#page-container .rw-depot-titre span { color: var(--rw-ink-2); font-weight: var(--rw-fw-regular); }

#page-container .rw-depot-vide { color: var(--rw-ink-2); }

#page-container .rw-depot-liste {
  list-style: none;
  margin: var(--rw-s-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--rw-s-4);
}

#page-container .rw-depot-item {
  display: flex;
  gap: var(--rw-s-4);
  align-items: center;
  padding: var(--rw-s-3);
  border-radius: var(--rw-r);
  background: var(--rw-bg);
  box-shadow: 0 1px 2px rgba(10,19,48,.05), 0 0 0 1px var(--rw-line);
}

#page-container .rw-depot-vignette {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: var(--rw-r-sm);
  overflow: hidden;
  background: var(--rw-bg-alt);
  display: block;
}

#page-container .rw-depot-vignette img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

#page-container .rw-depot-infos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

#page-container .rw-depot-nom {
  font-size: var(--rw-fs-small);
  font-weight: var(--rw-fw-semi);
  color: var(--rw-ink);
  word-break: break-all;
}

#page-container .rw-depot-meta {
  font-size: var(--rw-fs-small);
  color: var(--rw-ink-2);
}

#page-container .rw-depot-url {
  width: 100%;
  margin-top: 3px;
  padding: 5px 8px;
  border: 1px solid var(--rw-border-ui);
  border-radius: var(--rw-r-sm);
  background: var(--rw-bg-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--rw-ink-2);
  cursor: copy;
}

@media (max-width: 734px) {
  #page-container .rw-depot-zone { padding: var(--rw-s-7) var(--rw-s-5); }
  #page-container .rw-depot-liste { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   14. BOUTONS — CORRECTIFS
   Constat sur le site en ligne : Divi pose la classe du module sur le lien
   <a class="et_pb_button ..."> et non sur son conteneur. Deux consequences,
   corrigees ici :
   - la variante sombre ne s'appliquait jamais : texte bleu sur fond marine ;
   - les boutons voisins s'empilaient au lieu de s'aligner.
   ========================================================================== */

/* Boutons voisins : c'est le conteneur qui doit passer en ligne. */
#page-container .et_pb_button_module_wrapper:has(> .rw-cta-item) {
  display: inline-block;
  vertical-align: top;
  margin: var(--rw-s-7) var(--rw-s-4) 0 0;
}
#page-container .et_pb_button.rw-cta-item { margin: 0; }

/* Sur fond sombre, le bouton passe en blanc plein : c'est le seul contraste
   franc possible sur du marine traverse d'un halo bleu. */
#page-container .rw-section--deep .et_pb_button,
#page-container .rw-section--deep .et_pb_button.rw-btn-ghost {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--rw-accent);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.55);
}
#page-container .rw-section--deep .et_pb_button:hover,
#page-container .rw-section--deep .et_pb_button.rw-btn-ghost:hover {
  background-color: var(--rw-accent-light-2);
  border-color: var(--rw-accent-light-2);
  color: var(--rw-accent-hover);
}

@media (max-width: 734px) {
  #page-container .et_pb_button_module_wrapper:has(> .rw-cta-item) {
    display: block;
    margin: var(--rw-s-4) 0 0;
  }
  #page-container .et_pb_button.rw-cta-item { display: block; text-align: center; }
}

/* ==========================================================================
   15. ILLUSTRATIONS DES TROIS SITUATIONS
   ========================================================================== */

#page-container .rw-sit-ill {
  display: block;
  margin: calc(var(--rw-s-7) * -1) calc(var(--rw-s-7) * -1) var(--rw-s-6);
  padding: var(--rw-s-6) var(--rw-s-6) var(--rw-s-5);
  background: linear-gradient(180deg, #F5F7FC 0%, #EDF1FA 100%);
  border-bottom: 1px solid var(--rw-line);
}

#page-container .rw-sit-ill svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(10,19,48,.10));
  transition: transform var(--rw-t) var(--rw-ease);
}

#page-container .rw-card:hover .rw-sit-ill svg { transform: translateY(-4px); }

/* Teintes : toutes issues des variables du systeme. */
#page-container .rw-ill .w      { fill: #FFFFFF; stroke: var(--rw-line); stroke-width: 1.5; }
#page-container .rw-ill .sep    { stroke: var(--rw-line); stroke-width: 1.5; }
#page-container .rw-ill .pt     { fill: var(--rw-line-strong); }
#page-container .rw-ill .g      { fill: #DDE1EA; }
#page-container .rw-ill .g2     { fill: #EEF0F5; }
#page-container .rw-ill .grille { stroke: #EEF0F5; stroke-width: 1.5; }
#page-container .rw-ill .courbe { fill: none; stroke: var(--rw-accent); stroke-width: 3;
                                  stroke-linecap: round; stroke-linejoin: round; }
#page-container .rw-ill .chute  { fill: none; stroke: var(--rw-error); stroke-width: 3;
                                  stroke-dasharray: 6 5; stroke-linecap: round; stroke-linejoin: round; }
#page-container .rw-ill .point  { fill: #FFFFFF; stroke: var(--rw-accent); stroke-width: 2.5; }
#page-container .rw-ill .es     { fill: #FDECEA; }
#page-container .rw-ill .e      { fill: var(--rw-error); }
#page-container .rw-ill .blanc  { fill: #FFFFFF; }
#page-container .rw-ill .vieux  { fill: #D3D7E0; }
#page-container .rw-ill .vieux2 { fill: #E4E7EE; stroke: var(--rw-line-strong); stroke-dasharray: 3 3; }
#page-container .rw-ill .as     { fill: var(--rw-accent-soft); }
#page-container .rw-ill .a      { fill: var(--rw-accent); }
#page-container .rw-ill .a2     { fill: var(--rw-accent-light); }
#page-container .rw-ill .carte  { fill: #FFFFFF; stroke: #DCE3F4; stroke-width: 1.5; }
#page-container .rw-ill .coupe  { stroke: var(--rw-accent); stroke-width: 2; }
#page-container .rw-ill .poignee{ fill: #FFFFFF; stroke: var(--rw-accent); stroke-width: 2; }
#page-container .rw-ill .fleche { fill: none; stroke: var(--rw-accent); stroke-width: 2;
                                  stroke-linecap: round; stroke-linejoin: round; }
#page-container .rw-ill .pointg { fill: #D6DCEA; }
#page-container .rw-ill .fil    { fill: rgba(0,53,173,.04); stroke: var(--rw-accent); stroke-width: 1.5;
                                  stroke-dasharray: 5 4; }
#page-container .rw-ill .actif  { fill: var(--rw-accent-soft); stroke-dasharray: none; stroke-width: 2; }
#page-container .rw-ill .curseur{ fill: var(--rw-bg-deep); stroke: #FFFFFF; stroke-width: 1.5;
                                  stroke-linejoin: round; }

/* Le trace de chute se dessine a l'apparition de la carte. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #page-container .rw-ill .chute {
      stroke-dasharray: 6 5;
      animation: rw-ill-clignote 2.4s ease-in-out infinite;
    }
    @keyframes rw-ill-clignote { 50% { opacity: .45; } }
  }
}

@media (max-width: 980px) {
  #page-container .rw-sit-ill {
    margin: calc(var(--rw-s-6) * -1) calc(var(--rw-s-6) * -1) var(--rw-s-5);
  }
}

/* ==========================================================================
   16. POURQUOI MOI — liste editoriale
   Six cartes identiques en grille, c'est le motif le plus « gabarit » qui
   soit. Ici : deux colonnes, pictogramme a gauche, filets de separation.
   ========================================================================== */

#page-container .rw-avantages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--rw-s-8);
}

#page-container .rw-avantage {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--rw-s-5);
  align-items: start;
  padding: var(--rw-s-6) 0;
  border-top: 1px solid var(--rw-line);
}

#page-container .rw-avantage h3 {
  font-size: var(--rw-fs-lead);
  margin: 2px 0 var(--rw-s-2);
}

#page-container .rw-avantage p { color: var(--rw-ink-2); margin: 0; }

#page-container .rw-icon--duo {
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 18px;
  background: linear-gradient(150deg, #FFFFFF 0%, var(--rw-accent-soft) 100%);
}
#page-container .rw-icon--duo svg { width: 32px; height: 32px; }

#page-container .rw-avantage:hover .rw-icon--duo {
  transform: translateY(-2px) rotate(-3deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(10,19,48,.07),
    0 14px 26px -12px rgba(0,53,173,.48);
}

@media (max-width: 980px) {
  #page-container .rw-avantages { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 734px) {
  #page-container .rw-avantage { grid-template-columns: 52px minmax(0, 1fr); gap: var(--rw-s-4); }
  #page-container .rw-icon--duo { width: 52px; height: 52px; border-radius: 15px; }
  #page-container .rw-icon--duo svg { width: 26px; height: 26px; }
}

/* ==========================================================================
   17. METHODE — parcours en deux colonnes
   A gauche, l'intention reste a l'ecran pendant la lecture (position
   collante). A droite, cinq etapes sur une piste qui se remplit au fil du
   defilement, chacune avec ce qu'elle produit.
   ========================================================================== */

#page-container .rw-methode-row.et_pb_row {
  display: flex;
  align-items: stretch;
}

#page-container .rw-methode-intro {
  position: sticky;
  top: 120px;
}

#page-container .rw-methode-intro .et_pb_button { margin-top: var(--rw-s-6); display: inline-block; }

#page-container .rw-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  view-timeline-name: --rw-etapes;
}

/* La piste, puis son remplissage. */
#page-container .rw-etapes::before,
#page-container .rw-etapes::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  border-radius: 2px;
}
#page-container .rw-etapes::before { background: var(--rw-line); }
#page-container .rw-etapes::after {
  background: linear-gradient(180deg, var(--rw-accent), var(--rw-accent-light));
  transform-origin: top;
  opacity: .35;
}

#page-container .rw-etape {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--rw-s-6);
  padding: var(--rw-s-3) 0;
  view-timeline-name: --rw-etape;
}

#page-container .rw-etape-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: var(--rw-s-5);
  border-radius: 50%;
  background: var(--rw-accent);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: var(--rw-fw-bold);
  letter-spacing: .04em;
  box-shadow: 0 0 0 2px var(--rw-accent), 0 0 0 8px rgba(0,53,173,.10);
}

#page-container .rw-etape-corps {
  position: relative;
  overflow: hidden;
  padding: var(--rw-s-6) var(--rw-s-7) var(--rw-s-6) var(--rw-s-6);
  border-radius: var(--rw-r-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
  box-shadow: 0 1px 2px rgba(10,19,48,.05), 0 0 0 1px var(--rw-line);
  transition: transform var(--rw-t) var(--rw-ease), box-shadow var(--rw-t) var(--rw-ease);
}

#page-container .rw-etape-corps:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(10,19,48,.05), 0 0 0 1px var(--rw-line-strong),
              0 22px 44px -26px rgba(10,19,48,.34);
}

/* Grand numero en filigrane : la lecture reste sur le titre. */
#page-container .rw-etape-corps::after {
  content: attr(data-num);
  position: absolute;
  right: var(--rw-s-5);
  top: -6px;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(0,53,173,.05);
  pointer-events: none;
}

#page-container .rw-etape h3 { font-size: var(--rw-fs-h3); margin: 0 0 var(--rw-s-2); position: relative; }
#page-container .rw-etape p  { color: var(--rw-ink-2); margin: 0; position: relative; }

#page-container .rw-etape-livrable {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rw-s-2);
  margin-top: var(--rw-s-4);
  padding: 6px 12px;
  border-radius: var(--rw-r-pill);
  background: var(--rw-accent-soft);
  color: var(--rw-accent);
  font-size: var(--rw-fs-small);
  font-weight: var(--rw-fw-semi);
  letter-spacing: var(--rw-ls-body);
}
#page-container .rw-etape-livrable::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rw-accent);
}

/* Progression pilotee par le defilement, la ou le navigateur le permet.
   Ailleurs, et si les animations sont reduites, tout est affiche d'emblee. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #page-container .rw-etapes::after {
      opacity: 1;
      transform: scaleY(0);
      animation: rw-piste linear both;
      animation-timeline: --rw-etapes;
      animation-range: entry 35% exit 55%;
    }
    @keyframes rw-piste { to { transform: scaleY(1); } }

    #page-container .rw-etape-num {
      animation: rw-noeud linear both;
      animation-timeline: --rw-etape;
      animation-range: entry 70% cover 45%;
    }
    @keyframes rw-noeud {
      from {
        background: #FFFFFF;
        color: var(--rw-ink-2);
        box-shadow: 0 0 0 2px var(--rw-line-strong), 0 0 0 8px rgba(0,53,173,0);
      }
    }

    #page-container .rw-etape-corps {
      animation: rw-etape-in linear both;
      animation-timeline: --rw-etape;
      animation-range: entry 0% entry 90%;
    }
    @keyframes rw-etape-in { from { opacity: 0; transform: translateX(18px); } }
  }
}

@media (max-width: 980px) {
  #page-container .rw-methode-row.et_pb_row { display: block; }
  #page-container .rw-methode-intro { position: static; margin-bottom: var(--rw-s-7); }
}
@media (max-width: 734px) {
  #page-container .rw-etape { grid-template-columns: 40px minmax(0, 1fr); gap: var(--rw-s-4); }
  #page-container .rw-etape-num { width: 40px; height: 40px; font-size: 13px; margin-top: var(--rw-s-4); }
  #page-container .rw-etapes::before,
  #page-container .rw-etapes::after { left: 19px; }
  #page-container .rw-etape-corps { padding: var(--rw-s-5); }
  #page-container .rw-etape-corps::after { font-size: 64px; }
}

/* ==========================================================================
   18. REALISATIONS — cartes avant / intervention
   ========================================================================== */

#page-container .rw-cas2-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rw-s-5);
}

#page-container .rw-cas2 {
  display: flex;
  flex-direction: column;
  border-radius: var(--rw-r-lg);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(10,19,48,.05), 0 0 0 1px var(--rw-line);
  transition: transform var(--rw-t) var(--rw-ease), box-shadow var(--rw-t) var(--rw-ease);
}

#page-container .rw-cas2:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(10,19,48,.05), 0 0 0 1px var(--rw-line-strong),
              0 26px 50px -28px rgba(10,19,48,.4);
}

/* Le fond de la zone logo reprend la couleur de fond du logo lui-meme : le
   logo s'y fond au lieu de flotter dans un rectangle etranger. */
#page-container .rw-cas2-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  padding: var(--rw-s-5) var(--rw-s-6);
  background: var(--rw-bg-alt);
}

#page-container .rw-cas2-logo img {
  max-height: 76px;
  max-width: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}

#page-container .rw-cas2-corps {
  display: flex;
  flex-direction: column;
  gap: var(--rw-s-4);
  padding: var(--rw-s-6);
  flex: 1 1 auto;
}

#page-container .rw-cas2-tags {
  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);
}

#page-container .rw-cas2 h3 { font-size: var(--rw-fs-h3); margin: 0; }

#page-container .rw-cas2-av { margin: 0; display: grid; gap: var(--rw-s-3); }

#page-container .rw-cas2-av > div {
  padding: var(--rw-s-4);
  border-radius: var(--rw-r);
  background: var(--rw-bg-alt);
}

#page-container .rw-cas2-av dt {
  font-size: 11px;
  font-weight: var(--rw-fw-bold);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  margin-bottom: 4px;
}

#page-container .rw-cas2-av dd { margin: 0; font-size: var(--rw-fs-body); line-height: var(--rw-lh-body); }

#page-container .rw-cas2-av .probleme dt { color: var(--rw-error); }
#page-container .rw-cas2-av .solution { background: var(--rw-accent-soft); }
#page-container .rw-cas2-av .solution dt { color: var(--rw-accent); }
#page-container .rw-cas2-av strong { color: var(--rw-ink); font-weight: var(--rw-fw-bold); }

#page-container .rw-cas2-pied {
  margin-top: auto;
  padding-top: var(--rw-s-4);
  border-top: 1px solid var(--rw-line);
  font-size: var(--rw-fs-small);
  color: var(--rw-ink-2);
}

@media (max-width: 980px) {
  #page-container .rw-cas2-grille { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}

/* Intro de la methode : surtitre et chapo dans un seul module, pour que
   tout le bloc reste a l'ecran pendant le defilement. */
#page-container .rw-methode-intro .rw-eyebrow-inline {
  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: var(--rw-s-4);
}
#page-container .rw-methode-intro h2 { margin-bottom: var(--rw-s-5); }
#page-container .rw-methode-intro .rw-lead-inline {
  font-size: var(--rw-fs-lead);
  line-height: var(--rw-lh-lead);
  letter-spacing: var(--rw-ls-lead);
  color: var(--rw-ink-2);
}

/* Realisation sans logo disponible. */
#page-container .rw-cas2-sanslogo {
  font-size: var(--rw-fs-small);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  color: var(--rw-ink-2);
}

/* ==========================================================================
   19. REALISATIONS — cartes en modules Divi natifs
   Remplacent la version HTML en un seul module texte, que l'editeur visuel
   de Divi reecrivait en la cassant. La colonne porte la carte, chaque module
   ne contient qu'un titre ou un paragraphe.
   ========================================================================== */

#page-container .et_pb_column.rw-cas2-col {
  display: flex;
  flex-direction: column;
  border-radius: var(--rw-r-lg);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(10,19,48,.05), 0 0 0 1px var(--rw-line);
  padding-bottom: var(--rw-s-6);
  transition: transform var(--rw-t) var(--rw-ease), box-shadow var(--rw-t) var(--rw-ease);
}

#page-container .et_pb_column.rw-cas2-col:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(10,19,48,.05), 0 0 0 1px var(--rw-line-strong),
              0 26px 50px -28px rgba(10,19,48,.4);
}

/* Divi ajoute une marge sous chaque module : la carte gere ses espacements. */
#page-container .rw-cas2-col > .et_pb_module { margin-bottom: 0 !important; }
#page-container .rw-cas2-col > .et_pb_text  { padding: 0 var(--rw-s-6); }

/* Zone logo : fond de la couleur du logo pour qu'il s'y fonde. */
#page-container .rw-cas2-logo-mod.et_pb_module {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  padding: var(--rw-s-5) var(--rw-s-6);
  background: var(--rw-bg-alt);
  text-align: center;
}
#page-container .rw-cas2-logo-mod--sombre.et_pb_module { background: #353936; }
#page-container .rw-cas2-logo-mod .et_pb_image_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#page-container .rw-cas2-logo-mod img {
  max-height: 76px;
  max-width: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}
#page-container .rw-cas2-logo-mod--vide p {
  margin: 0;
  font-size: var(--rw-fs-small);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
  color: var(--rw-ink-2);
}

#page-container .rw-cas2-tags-mod { margin-top: var(--rw-s-6) !important; }
#page-container .rw-cas2-tags-mod p {
  margin: 0;
  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);
}

#page-container .rw-cas2-titre-mod { margin-top: var(--rw-s-3) !important; }
#page-container .rw-cas2-titre-mod h3 { font-size: var(--rw-fs-h3); margin: 0; }

#page-container .rw-cas2-col > .rw-cas2-bloc {
  margin: var(--rw-s-4) var(--rw-s-6) 0 !important;
  padding: var(--rw-s-4) !important;
  border-radius: var(--rw-r);
  background: var(--rw-bg-alt);
}
#page-container .rw-cas2-bloc h4 {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: var(--rw-fw-bold);
  letter-spacing: var(--rw-ls-label);
  text-transform: uppercase;
}
#page-container .rw-cas2-bloc--probleme h4 { color: var(--rw-error); }
#page-container .rw-cas2-col > .rw-cas2-bloc--solution { background: var(--rw-accent-soft); }
#page-container .rw-cas2-bloc--solution h4 { color: var(--rw-accent); }
#page-container .rw-cas2-bloc p { margin: 0; color: var(--rw-ink); }
#page-container .rw-cas2-bloc strong { font-weight: var(--rw-fw-bold); }

/* Le pied se cale en bas : les cartes d'une rangee restent alignees. */
#page-container .rw-cas2-col > .rw-cas2-pied-mod { margin-top: auto !important; padding-top: var(--rw-s-5); }
#page-container .rw-cas2-pied-mod p {
  margin: 0;
  padding-top: var(--rw-s-4);
  border-top: 1px solid var(--rw-line);
  font-size: var(--rw-fs-small);
  color: var(--rw-ink-2);
}