/* Page "Comment ?" (#4576, ex-"Comment l'utiliser ?") — voir CLAUDE.md
   pour le contexte complet. Typographie de base (exo-eyebrow/exo-h1) et
   fond .exo-hero-bg déjà site-wide (customizer-additional-css.css), pas
   redéfinis ici. */

/* ===== Sommaire (ancres pilules) ===== */
.exo-toc .wp-block-buttons {
  row-gap: 10px;
  column-gap: 10px;
}
.exo-toc__btn .wp-block-button__link {
  background: #ffffff;
  color: #111111;
  border: 1.5px solid #e7eaf0;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.06);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.exo-toc__btn .wp-block-button__link:hover {
  background: var(--wp--preset--color--custom-bleu-rispon, #4fa3fd);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ===== Dégradé tan (section "L'utiliser au quotidien"), même principe
   que .bluedeg/.sportdeg déjà en place site-wide ===== */
.tandeg {
  background: linear-gradient(180deg, #f7f1e6 0%, #e8d9bd 100%);
}

/* ===== Carte "étape" (photo + numéro + légende), réutilisée dans les
   3 sections à étapes (enfiler / utiliser / monter le cordon) ===== */
.exo-step {
  text-align: left;
}
.exo-step__media {
  position: relative;
  margin-bottom: 12px;
}
.exo-step__img {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
}
.exo-step__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.exo-step__num {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #181818;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.25);
}
.exo-step__caption {
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* ===== Emplacements photo vides (aucun média sélectionné pour l'instant,
   le propriétaire les remplira depuis l'éditeur) — traitement purement
   visuel via :not(:has(img)), scopé à cette page pour ne pas affecter
   d'éventuels autres blocs Image vides ailleurs sur le site.
   ⚠️ Corrigé le 2026-09-06 : l'aspect-ratio fixe vivait uniquement ici,
   donc seulement tant que le bloc était vide - dès qu'une vraie photo
   était ajoutée, elle s'affichait à sa taille naturelle et décalait les
   cartes de la même rangée entre elles (signalé par le propriétaire,
   capture à l'appui, après l'ajout de sa première vraie photo). L'aspect-
   ratio (+ recadrage object-fit:cover de l'image réelle) est remonté sur
   .exo-step__img lui-même juste au-dessus, pour s'appliquer que le bloc
   soit vide OU rempli - ne reste ici que le style purement visuel du
   placeholder (fond hachuré, bordure pointillée, texte). ===== */
body.page-id-4576 figure.wp-block-image:not(:has(img)) {
  background: repeating-linear-gradient(135deg, #eef1f6, #eef1f6 12px, #e4e8ef 12px, #e4e8ef 24px);
  border: 2px dashed #c7ccd6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b93a3;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
}
body.page-id-4576 figure.wp-block-image:not(:has(img))::after {
  content: "Photo à venir";
}
body.page-id-4576 .exo-entretien__img {
  aspect-ratio: 1 / 1;
}

/* ===== Liste à coche (section Entretien) ===== */
.exo-check-list {
  list-style: none;
  padding-left: 0;
  margin: 16px 0;
}
.exo-check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}
.exo-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--custom-bleu-rispon, #4fa3fd);
  font-weight: 700;
}

/* ===== Consignes de sécurité (grille de 4 cartes) ===== */
.exo-safety-item {
  background: #ffffff;
  border: 1px solid #e7eaf0;
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  height: 100%;
}
.exo-safety-item__icon {
  font-size: 1.6rem;
  font-weight: 800;
  color: #181818;
  margin: 0 0 10px;
  line-height: 1.1;
}
.exo-safety-item__text {
  font-size: 0.88rem;
  color: #444444;
  margin: 0;
  line-height: 1.5;
}
.exo-safety-note {
  max-width: 640px;
  margin: 28px auto 0;
  font-size: 0.82rem;
  color: #777777;
}

/* ===== FAQ (accordéon natif) : chevron qui pivote à l'ouverture, même
   principe que .exo-faq-reveal (page Accueil 2026) ===== */
.exo-comment-faq .wp-block-accordion-heading {
  padding: 16px 4px;
  border-bottom: 1px solid #e7eaf0;
  cursor: pointer;
}
.exo-comment-faq .wp-block-accordion-heading__toggle-title {
  font-weight: 600;
}
.exo-comment-faq .wp-block-accordion-heading__toggle-icon svg {
  transition: transform 0.2s ease;
}
.exo-comment-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon svg {
  transform: rotate(180deg);
}

/* ===== Cartes photo "exo-card" (sections à étapes construites par le
   propriétaire lui-même : "Placer son bracelet", "Montage ou changement
   du cordon") — migré le 2026-09-06 depuis
   wp-content/themes/twentytwentyfour/functions.php, où ce CSS ne
   devrait jamais avoir vécu (écrasé à chaque mise à jour du thème
   parent depuis wp-admin). Numéro de badge généré par compteur CSS
   (`.exo-steps > .exo-card`, incrémenté automatiquement par carte),
   pas de balisage HTML dédié pour le chiffre.
   ⚠️ Corrigé au passage (même date) : `.wp-block-image` passe de
   `min-height` à `height` fixe — signalé par le propriétaire comme un
   "léger décalage" entre la 1ère carte et les suivantes d'une même
   rangée, sans cause de fond identifiée malgré vérification (structure
   de bloc, dimensions réelles des photos sur disque, attribut
   `loading` des `<img>` : tout identique entre cartes) — un
   `min-height` laisse la porte ouverte à une variation résiduelle
   selon l'état de chargement/décodage de l'image, qu'une hauteur fixe
   élimine catégoriquement. ===== */
body.page-id-4576 .exo-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(20, 20, 20, 0.05);
  transition: transform 0.25s, box-shadow 0.25s;
  height: 100%;
}
body.page-id-4576 .exo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.1);
}
body.page-id-4576 .exo-card .wp-block-image {
  margin: 0;
  background: linear-gradient(160deg, #f6f8fb, #eef2f7);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 290px;
  border-bottom: 1px solid #eef0f3;
  position: relative;
}
body.page-id-4576 .exo-card .wp-block-image img {
  width: auto !important;
  max-width: 100%;
  max-height: 254px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.12);
}
body.page-id-4576 .exo-card > p {
  padding: 16px 20px 20px;
  margin: 0;
  color: #5a5f68;
  font-size: 0.95rem;
  line-height: 1.6;
}
body.page-id-4576 .exo-steps {
  counter-reset: exostep;
}
body.page-id-4576 .exo-steps .exo-card {
  counter-increment: exostep;
}
body.page-id-4576 .exo-steps .exo-card .wp-block-image::before {
  content: counter(exostep);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 20px;
  background: #ff6a13;
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}
body.page-id-4576 .exo-cordon-media img {
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(20, 20, 20, 0.14);
}
@media (max-width: 767px) {
  /* 5px de marge de part et d'autre, même technique et même raison que
     .exo-montage-grid juste plus bas dans ce fichier (voir son
     commentaire pour le détail) — cette carrousel ("Placer son
     bracelet") est le jumeau visuel de celui du "Montage", même
     ancêtre .exo-steps/has-global-padding. */
  body.page-id-4576 .wp-block-columns:has(> .wp-block-column.exo-card) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-top: 4px;
    padding-bottom: 8px;
    margin-left: calc(-1 * var(--wp--style--root--padding-left) + 5px) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right) + 5px) !important;
  }
  body.page-id-4576 .wp-block-columns:has(> .wp-block-column.exo-card)::-webkit-scrollbar {
    display: none;
  }
  body.page-id-4576 .wp-block-columns:has(> .wp-block-column.exo-card) > .wp-block-column.exo-card {
    flex: 0 0 80% !important;
    scroll-snap-align: center;
  }
}
body.page-id-4576 .exo-montage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* ⚠️ Cause réelle du "décalage sur la 1ère carte" trouvée le 2026-09-06 :
   ce groupe (`layout:{"type":"default"}`) porte la classe native
   `is-layout-flow`, et le thème génère une règle globale
   `:where(.is-layout-flow) > *{margin-block-start:1.2rem}` sauf sur
   `:first-child` (margin-block-start:0) — donc les cartes 2 à 15
   héritent d'une marge haute de ~19px que la carte 1 n'a pas, les
   poussant vers le bas par rapport à elle. `:where()` a une spécificité
   nulle, ce simple sélecteur à 2 classes suffit à l'emporter sans
   `!important`. La correction précédente (height fixe) n'avait aucun
   effet sur cette cause réelle, d'où le bug qui persistait. */
body.page-id-4576 .exo-montage-grid > .exo-card {
  margin-block-start: 0;
}
@media (max-width: 767px) {
  /* ⚠️ 5px de marge de part et d'autre du carrousel, comme demandé pour
     .exo-grid-4-wrap/.exo-video-wrap (voir customizer-additional-css.css)
     — même technique 100% statique : on annule la valeur EXACTE et déjà
     connue du padding hérité (--wp--style--root--padding-left/-right,
     posé par la classe `has-global-padding` de l'ancêtre `.exo-steps`,
     confirmé en direct dans le HTML rendu), puis on la remplace par 5px.
     Aucun `vw`/JS impliqué, donc aucun recalcul possible en cours de
     scroll (voir l'historique complet de cette technique dans
     CLAUDE.md/customizer-additional-css.css).
     `!important` nécessaire : `.exo-montage-grid` est enfant DIRECT d'un
     groupe `layout:"constrained"` (`.exo-steps`), qui reçoit la règle
     générique WordPress `.is-layout-constrained > :where(...)
     {margin-left/right:auto !important}` — même cause déjà rencontrée
     pour `.exo-cordons-col`/`.exo-video-wrap`. */
  body.page-id-4576 .exo-montage-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-top: 4px;
    padding-bottom: 8px;
    margin-left: calc(-1 * var(--wp--style--root--padding-left) + 5px) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right) + 5px) !important;
  }
  body.page-id-4576 .exo-montage-grid::-webkit-scrollbar {
    display: none;
  }
  body.page-id-4576 .exo-montage-grid > .exo-card {
    flex: 0 0 80% !important;
    scroll-snap-align: center;
  }
}


/* ===== Consignes de securite : icones devant chaque phrase
   (2026-09-07, demande explicite du proprietaire). La liste native
   (core/list) garde ses <li>, mais chaque item devient une ligne
   flex icone+texte plutot qu'une puce classique. ===== */
.exo-safety-list {
  list-style: none;
  padding-left: 0;
}
.exo-safety-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.exo-safety-row:last-child {
  margin-bottom: 0;
}
.exo-safety-row__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 2px;
}
.exo-safety-row__text {
  flex: 1;
}