/* ==========================================================================
   Laundry Patong — intégration Gutenberg
   Les blocs natifs ajoutent leurs propres conteneurs : on les rend
   transparents pour que les grilles du design system fonctionnent, et on
   habille Bouton / Image / Détails aux couleurs de la marque.
   ========================================================================== */

/* Le conteneur interne d'un bloc Groupe ne doit pas casser une grille. */
[class*="lp-"] > .wp-block-group__inner-container { display: contents; }

/* --- Images --- */
.lp-page figure.wp-block-image { margin: 0; }
.wp-block-image.lp-media { display: block; }
.wp-block-image.lp-media img { border-radius: inherit; width: 100%; height: 100%; object-fit: cover; }

/* --- Boutons natifs habillés aux couleurs du design system --- */
.wp-block-buttons.lp-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-xxl);
}
.wp-block-buttons.lp-actions--left { justify-content: flex-start; margin-top: var(--space-md); }
.wp-block-buttons.lp-actions--tight { margin-top: var(--space-md); }
.wp-block-buttons.lp-actions--block { margin-top: 0; }
.wp-block-buttons.lp-actions--block .wp-block-button,
.wp-block-buttons.lp-actions--block .wp-block-button__link { width: 100%; }

.lp-actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--type-link-lg-size);
  font-weight: 600;
  line-height: 1.4;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-xl);
  min-height: 44px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.lp-actions .wp-block-button__link:hover { background: var(--lp-violet-400); color: var(--color-on-primary); }
.lp-actions .wp-block-button__link:active { transform: scale(var(--press-scale)); }
.lp-actions .wp-block-button__link:focus-visible { outline: none; box-shadow: var(--glow-primary); }

/* Turquoise : réservé à l'action la plus engageante de la page — Book a pickup. */
.lp-actions .lp-btn--sea .wp-block-button__link {
  background: var(--color-sea);
  color: var(--color-on-sea);
  font-weight: 700;
  padding: var(--space-sm) var(--space-xl);
}
.lp-actions .lp-btn--sea .wp-block-button__link:hover { background: var(--lp-sea-400); color: var(--color-on-sea); }
.lp-actions .lp-btn--sea .wp-block-button__link:focus-visible { box-shadow: var(--glow-sea); }

.lp-actions .lp-btn--white .wp-block-button__link {
  background: var(--surface-light);
  color: var(--text-on-light);
  font-size: var(--type-link-size);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-md);
}
.lp-actions .lp-btn--white .wp-block-button__link:hover { background: #ececff; color: var(--text-on-light); }

/* Icône camion devant le bouton de réservation */
.lp-actions .lp-btn--truck .wp-block-button__link::before {
  content: "";
  width: 18px; height: 18px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--lp-icon); mask-image: var(--lp-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* --- Boîtes à icônes --- */
.lp-journey__icon::before,
.lp-card__icon::before { width: 26px; height: 26px; }
.lp-area__pin::before,
.lp-row__icon::before { width: 20px; height: 20px; }

.lp-area__check {
  width: 20px; height: 20px; flex: 0 0 auto;
  background-color: var(--color-sea);
  -webkit-mask-image: var(--lp-icon); mask-image: var(--lp-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}

.lp-turnaround__line::before {
  content: "";
  width: 20px; height: 20px; flex: 0 0 auto;
  margin-top: 2px;
  opacity: .6;
  background-color: currentColor;
  -webkit-mask-image: var(--lp-icon); mask-image: var(--lp-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.lp-turnaround__line p { margin: 0; }

/* Cinq étoiles dessinées par répétition du masque — aucune image chargée. */
.lp-review__stars {
  width: 90px; height: 18px;
  background-color: var(--color-magenta);
  -webkit-mask-image: var(--lp-icon); mask-image: var(--lp-icon);
  -webkit-mask-size: 18px 18px; mask-size: 18px 18px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

/* --- FAQ : bloc Détails natif --- */
.lp-faq .wp-block-details {
  background: var(--surface-paper);
  box-shadow: var(--elevation-card);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.lp-band--canvas .lp-faq .wp-block-details { background: var(--surface-raised); box-shadow: none; }
.lp-faq .wp-block-details summary {
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--type-link-lg-size);
  font-weight: 700;
  color: var(--text-ink);
  list-style: none;
}
.lp-band--canvas .lp-faq .wp-block-details summary { color: var(--text-primary); }
.lp-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.lp-faq .wp-block-details summary::marker { content: ""; }
.lp-faq .wp-block-details summary::after {
  content: "";
  width: 20px; height: 20px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duration-base) var(--ease-standard);
}
.lp-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.lp-faq .wp-block-details p {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: 1.5;
  color: var(--text-ink-soft);
  margin: var(--space-md) 0 0;
  max-width: 720px;
}
.lp-band--canvas .lp-faq .wp-block-details p { color: var(--text-dim); }
.lp-faq { display: flex; flex-direction: column; gap: var(--space-sm); }

/* --- Listes de bénéfices : le bloc Liste natif dans une carte à puce cochée --- */
.lp-price__features.wp-block-list { list-style: none; margin: 0; padding: 0; }

/* --- Marges par défaut neutralisées : le rythme vient des bandes --- */
.lp-page .entry-content p:last-child,
.lp-page .entry-content h2:last-child,
.lp-page .entry-content h3:last-child { margin-bottom: 0; }
.lp-card p:last-child, .lp-price p:last-child, .lp-notice p:last-child,
.lp-review p:last-child, .lp-turnaround p:last-child { margin-bottom: 0; }
.lp-head p.lp-lead { margin-bottom: 0; }

/* Le texte d'une notice est un paragraphe : il ne doit pas ajouter de marge. */
.lp-notice p { margin: 0; }
.lp-notice { align-items: flex-start; }

/* --- Éditeur : même rendu que le site --- */
.editor-styles-wrapper { background: var(--surface-canvas); }

/* ==========================================================================
   Ajustements GeneratePress : les bandes doivent aller d'un bord a l'autre,
   la largeur revient dans .lp-container.
   ========================================================================== */
.lp-page .site.grid-container,
.lp-page .site-content,
.lp-page .content-area,
.lp-page .site-main,
.lp-page .inside-article,
.lp-page .entry-content { max-width: none; width: 100%; padding: 0; margin: 0; }
.lp-page article.page { border: 0; margin: 0; }

/* Le bloc Couverture sert de hero : on neutralise ses valeurs par defaut. */
.lp-hero.wp-block-cover {
  display: block;
  min-height: 0;
  padding: var(--space-band) 0 var(--space-band);
}
.lp-hero .wp-block-cover__inner-container { width: 100%; }
.lp-hero .wp-block-cover__image-background { object-position: 72% 50%; }

/* Marges de paragraphes : le rythme vient des composants, pas de wpautop. */
.lp-eyebrow, .lp-journey__label, .lp-journey__detail, .lp-card__title,
.lp-price__name, .lp-price__amount, .lp-price__min, .lp-area__name,
.lp-review__author, .lp-review__meta, .lp-row__title, .lp-row__meta,
.lp-turnaround__label, .lp-badge, .lp-footer__note { margin-top: 0; margin-bottom: 0; }
.lp-journey__label { margin-bottom: 0; }
.lp-journey__body { min-width: 0; }
.lp-card__title + .lp-card__text { margin-top: 10px; }
.lp-turnaround__label { margin-bottom: 0; }

/* Espaces verticaux entre blocs d'une meme bande */
.lp-head + *, .lp-prices + .lp-spacer, .lp-areas + .lp-note-center { margin-top: var(--space-xl); }
.lp-spacer { margin-top: var(--space-xl); }
.lp-grid--spaced { margin-top: var(--space-section); }
.lp-note-center { text-align: center; margin-top: var(--space-xl); font-family: var(--font-body); font-size: 15px; }
.lp-notices + .lp-grid { margin-top: var(--space-section); }
.lp-stack { display: grid; gap: var(--space-sm); align-content: start; }
.lp-container > .lp-actions { margin-top: var(--space-section); }
.lp-review__who { margin-top: auto; }

/* Icone magenta de l'express */
.lp-icobox--magenta { background: var(--gradient-magenta) !important; }

/* Fleches du parcours */
.lp-journey__arrow::before {
  content: "";
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask-image: var(--lp-icon); mask-image: var(--lp-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* Badge dans une carte tarifaire */
.lp-price__head .lp-badge { display: inline-flex; }

/* La bande CTA est un encart, pas une bande pleine largeur */
.lp-cta.wp-block-group { margin: 0; }

/* Le CTA de navigation doit passer devant les couleurs du Customizer :
   on monte la specificite au niveau de celles de GeneratePress. */
.main-navigation .main-nav ul li.lp-nav-cta > a,
.main-navigation .main-nav ul li.lp-nav-cta > a:hover,
.main-navigation .main-nav ul li.lp-nav-cta > a:focus {
  background: var(--color-sea);
  background-color: var(--color-sea);
  color: var(--color-on-sea);
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-xl);
  line-height: 1.4;
  margin-left: var(--space-md);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background-color var(--duration-base) var(--ease-standard);
}
.main-navigation .main-nav ul li.lp-nav-cta > a:hover {
  background-color: var(--lp-sea-400);
}
.main-navigation .main-nav ul li.lp-nav-cta { display: flex; align-items: center; }

/* --- Boites a icones : tailles et couleurs par contexte --- */
.lp-turnaround__icon { margin-bottom: 16px; }
.lp-turnaround__icon.lp-icobox--magenta { background: var(--gradient-magenta); }

.lp-area__pin.lp-icobox,
.lp-row__icon.lp-icobox {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .08);
  color: var(--lp-white);
}
.lp-band--paper .lp-row__icon.lp-icobox,
.lp-band--mist .lp-row__icon.lp-icobox {
  background: var(--surface-mist);
  color: var(--text-ink);
}
.lp-area__pin.lp-icobox::before,
.lp-row__icon.lp-icobox::before { width: 20px; height: 20px; }

/* Le rayon des boutons ne doit pas etre remis a zero par GeneratePress. */
.lp-actions .wp-block-button__link,
.lp-actions .wp-block-button .wp-block-button__link { border-radius: var(--radius-sm); }
.lp-actions .lp-btn--white .wp-block-button__link { border-radius: var(--radius-lg); }

/* Les cartes tarifaires : le bouton colle en bas */
.lp-price .wp-block-buttons { margin-top: auto; }

/* --- Corrections de detail --- */

/* Le prix et son unite restent sur la meme ligne. */
.lp-price__amount { display: flex; align-items: baseline; gap: 4px; }
.lp-price__unit { white-space: nowrap; }

/* FAQ : plus quand ferme, moins quand ouvert (pas une croix). */
.lp-faq .wp-block-details[open] summary::after {
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* La bande CTA garde ses coins arrondis dans une bande pleine largeur. */
.lp-container > .lp-cta { border-radius: var(--radius-xl); }

/* Le badge d'une formule reste sur la ligne du nom quand la place le permet. */
.lp-price__head { row-gap: var(--space-xs); }

/* --- Le CTA de navigation passe devant les couleurs generees par le Customizer --- */
li.lp-nav-cta > a {
  background-color: var(--color-sea) !important;
  color: var(--color-on-sea) !important;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-xl) !important;
  line-height: 1.4 !important;
  margin-left: var(--space-md);
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
}
li.lp-nav-cta > a:hover,
li.lp-nav-cta > a:focus { background-color: var(--lp-sea-400) !important; color: var(--color-on-sea) !important; }

/* --- Le prix ne se coupe jamais sur deux lignes --- */
.lp-price__amount {
  display: block;
  white-space: nowrap;
  font-size: clamp(34px, 3.2vw, var(--type-display-md-size));
}
.lp-price__unit { white-space: nowrap; }

/* --- Hero mobile : une photo derriere le titre est illisible sur petit ecran.
   Elle devient une carte sous les boutons et le texte revient sur le canvas. --- */
.lp-hero__mobile-media { display: none; }

@media (max-width: 900px) {
  .lp-hero .wp-block-cover__image-background { display: none; }
  .lp-hero .wp-block-cover__background { background: var(--surface-canvas) !important; }
  .lp-hero .lp-h1, .lp-hero__lead { text-shadow: none; }
  .lp-hero__mobile-media.wp-block-image {
    display: block;
    margin-top: var(--space-xxl);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--elevation-1);
  }
  .lp-hero__mobile-media.wp-block-image img { height: auto; }
}

/* --- Hero : le bouton principal adopte le meme gabarit et le meme arrondi
   que le bouton secondaire (View prices) de la premiere section. --- */
.lp-hero .lp-actions .lp-btn--sea,
.lp-hero .lp-actions .lp-btn--sea .wp-block-button__link,
.lp-cta .lp-actions .lp-btn--sea,
.lp-cta .lp-actions .lp-btn--sea .wp-block-button__link {
  font-size: var(--type-link-size);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-md);
}

/* --- Footer : le nom geant doit tenir en entier quelle que soit la largeur.
   On dimensionne la police sur la largeur du conteneur (container query),
   avec le clamp en vw comme repli pour les navigateurs sans cqi. --- */
.lp-footer__rule { container-type: inline-size; }
@supports (font-size: 1cqi) {
  .lp-footer__giant { font-size: 12.2cqi; }
}

/* --------------------------------------------------------------------------
   PAGE CONTACT : formulaire natif + footer a deux colonnes
   -------------------------------------------------------------------------- */
.lp-footer__cols { grid-template-columns: 1.2fr 1fr 1fr; }
@media (max-width: 900px) {
  .lp-footer__cols { grid-template-columns: 1fr; }
}

.lp-form-wrap { width: 100%; }
.lp-form { display: flex; flex-direction: column; gap: var(--space-md); }
.lp-form__row { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.lp-form__label {
  font-family: var(--font-body);
  font-size: var(--type-link-sm-size);
  font-weight: 600;
  color: var(--text-on-light);
}
.lp-form__hint { font-weight: 400; opacity: .6; }
.lp-form__input {
  font-family: var(--font-body);
  font-size: var(--type-link-size);
  color: var(--text-on-light);
  background: var(--lp-white, #fff);
  border: 1px solid rgba(10, 13, 58, .14);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.lp-form__input::placeholder { color: rgba(10, 13, 58, .45); }
.lp-form__input:focus {
  outline: none;
  border-color: var(--color-sea);
  box-shadow: var(--glow-sea);
}
.lp-form__textarea { resize: vertical; min-height: 140px; }
.lp-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-form__row--submit { margin-top: var(--space-xs); }
.lp-form__row--submit .lp-btn { width: 100%; justify-content: center; }

.lp-form__notice {
  font-family: var(--font-body);
  font-size: var(--type-link-size);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: var(--space-md);
}
.lp-form__notice--ok {
  background: rgba(25, 213, 198, .18);
  color: rgb(9, 92, 86);
  border: 1px solid rgba(25, 213, 198, .35);
}
.lp-form__notice--error {
  background: rgba(214, 40, 40, .10);
  color: rgb(150, 25, 25);
  border: 1px solid rgba(255, 107, 107, .35);
}

/* Le conteneur du bouton porte le fond : il doit porter l'arrondi partout. */
.lp-actions .lp-btn--sea { border-radius: var(--radius-lg); }

/* Dans une carte, la liste qui suit un bouton a besoin de respirer,
   surtout sur mobile ou le bouton occupe toute la largeur. */
.lp-card .lp-actions + .lp-grid--rows,
.lp-card .lp-actions + .lp-grid { margin-top: var(--space-lg); }
@media (max-width: 900px) {
  .lp-card .lp-actions + .lp-grid--rows,
  .lp-card .lp-actions + .lp-grid { margin-top: var(--space-xl); }
}

/* Hero mobile : plus d air entre les boutons et la photo. */
@media (max-width: 900px) {
  .lp-hero .lp-actions { margin-bottom: var(--space-xl); }
  .lp-hero .lp-hero__mobile-media.wp-block-image { margin-top: 48px; }
}

/* Les etoiles des avis : pleines (et non en contour) et centrees. */
.lp-review__stars {
  --lp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M11.525%202.295a.53.53%200%200%201%20.95%200l2.31%204.679a2.123%202.123%200%200%200%201.595%201.16l5.166.756a.53.53%200%200%201%20.294.904l-3.736%203.638a2.123%202.123%200%200%200-.611%201.878l.882%205.14a.53.53%200%200%201-.771.56l-4.618-2.428a2.122%202.122%200%200%200-1.973%200L6.396%2021.01a.53.53%200%200%201-.77-.56l.881-5.139a2.122%202.122%200%200%200-.611-1.879L2.16%209.795a.53.53%200%200%201%20.294-.906l5.165-.755a2.122%202.122%200%200%200%201.597-1.16z%22%2F%3E%3C%2Fsvg%3E");
  margin-inline: auto;
}

/* Hero mobile : on colle le contenu sous le header. La regle .lp-hero du
   design system perdait face a .lp-hero.wp-block-cover, d'ou le grand vide. */
@media (max-width: 900px) {
  .lp-hero.wp-block-cover { padding-top: var(--space-md); padding-bottom: var(--space-xxl); }
  .lp-hero .lp-eyebrow { margin-top: 0; }
}

/* Pages legales : colonne de lecture etroite et texte confortable. */
.lp-legal {
  max-width: 760px;
  margin-inline: auto;
  margin-top: var(--space-section);
}
.lp-legal p,
.lp-legal li {
  font-family: var(--font-body);
  font-size: var(--type-body-size, 16px);
  line-height: 1.75;
  color: var(--text-primary);
  opacity: .86;
}
.lp-legal p { margin-block: 0 var(--space-md); }
.lp-legal ul { margin: 0 0 var(--space-md); padding-left: 1.2em; }
.lp-legal li { margin-bottom: var(--space-xs); }
.lp-legal h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.lp-legal a { color: var(--color-sea); text-decoration: none; }
.lp-legal a:hover { text-decoration: underline; }
.lp-legal__meta { font-size: var(--type-link-sm-size); opacity: .6; }

/* Logo : image ronde a gauche du nom, header et footer. */
.lp-wordmark--logo:has(img.lp-logo)::before { display: none; }
.lp-logo {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  display: block;
}
.lp-footer .lp-logo { width: 72px; height: 72px; }
@media (max-width: 900px) {
  .lp-logo { width: 54px; height: 54px; }
}

/* --------------------------------------------------------------------------
   BLOG v2 : grille de cartes, article a la une, images en haut
   -------------------------------------------------------------------------- */
.lp-cats {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  justify-content: center; margin-bottom: var(--space-section);
}
.lp-cat {
  font-family: var(--font-body);
  font-size: var(--type-link-sm-size);
  font-weight: 600;
  color: var(--text-on-light);
  background: var(--lp-white, #fff);
  border: 1px solid rgba(10, 13, 58, .12);
  border-radius: var(--radius-full, 999px);
  padding: 9px 18px;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.lp-cat:hover {
  background: var(--color-sea); color: var(--color-on-sea);
  border-color: transparent; transform: translateY(-1px);
}

.lp-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: stretch;
}

.lp-post {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.lp-post:hover { transform: translateY(-4px); box-shadow: var(--elevation-2, 0 18px 40px rgba(10, 13, 58, .18)); }

.lp-post__thumb { display: block; margin: 0; overflow: hidden; background: var(--surface-mist, #eef1fb); }
.lp-post__thumb img {
  display: block; width: 100%; height: 260px; object-fit: cover;
  transition: transform var(--duration-slow, .6s) var(--ease-standard);
}
.lp-post:hover .lp-post__thumb img { transform: scale(1.04); }

.lp-post__body {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-xl);
  flex: 1 1 auto;
}
.lp-post__cat {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-sea);
  margin: 0;
}
.lp-post .lp-card__title { margin: 0; font-size: var(--type-h4-size, 20px); line-height: 1.25; }
.lp-post .lp-card__title a { color: inherit; text-decoration: none; }
.lp-post:hover .lp-card__title a { text-decoration: underline; text-underline-offset: 3px; }
.lp-post .lp-card__text { flex: 1 1 auto; margin: 0; }
.lp-post__more { margin: 0; }
.lp-post__more a { font-weight: 700; color: var(--color-sea); text-decoration: none; }
.lp-post__more a:hover { text-decoration: underline; }

/* Article a la une : deux colonnes, image a gauche */
.lp-post--featured { grid-column: 1 / -1; flex-direction: row; }
.lp-post--featured .lp-post__thumb { flex: 1 1 58%; }
.lp-post--featured .lp-post__thumb img { height: 100%; min-height: 420px; }
.lp-post--featured .lp-post__body { flex: 1 1 45%; justify-content: center; padding: var(--space-section); gap: var(--space-md); }
.lp-post--featured .lp-card__title { font-size: clamp(24px, 2.4vw, 34px); }

@media (max-width: 1000px) {
  .lp-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .lp-posts { grid-template-columns: 1fr; gap: var(--space-lg); }
  .lp-post--featured { flex-direction: column; }
  .lp-post--featured .lp-post__thumb img { min-height: 0; height: 240px; }
  .lp-post--featured .lp-post__body { padding: var(--space-xl); }
}

/* Jamais de texte coupe dans les cartes du blog */
.lp-post__body > * { overflow-wrap: anywhere; }
.lp-post .lp-card__title, .lp-post .lp-card__text, .lp-post__more { overflow: visible; text-overflow: clip; white-space: normal; }
.lp-post__body { min-width: 0; }

/* Grille uniforme : 3 articles par ligne, cartes de meme hauteur,
   image de meme taille et lien aligne en bas. */
.lp-posts { grid-auto-rows: 1fr; }
.lp-post--featured { grid-column: auto; flex-direction: column; }
.lp-post--featured .lp-post__thumb { flex: 0 0 auto; }
.lp-post--featured .lp-post__thumb img { height: 260px; min-height: 0; }
.lp-post--featured .lp-post__body { padding: var(--space-xl); justify-content: flex-start; gap: var(--space-sm); }
.lp-post--featured .lp-card__title { font-size: var(--type-h4-size, 20px); }
.lp-post__more { margin-top: auto; padding-top: var(--space-sm); }

/* Titre du hero : la seconde partie en magenta, comme les etoiles des avis. */
.lp-h1__accent { color: var(--color-magenta); }

/* Bureau uniquement : la partie magenta commence sur sa propre ligne.
   C'est purement visuel (display:block), le H1 reste une seule phrase. */
@media (min-width: 901px) {
  .lp-h1__accent { display: block; }
}

/* Bloc de texte SEO : colonne large pour reduire la hauteur de la section. */
.lp-seo { max-width: none; margin-top: var(--space-xl); }
.lp-seo p { max-width: none; }
@media (min-width: 1001px) {
  .lp-seo h3 { margin-top: var(--space-xl); }
}

/* Bloc SEO en deux lignes image + texte. */
.lp-seo__row { align-items: center; margin-top: var(--space-section); }
.lp-seo__row .lp-seo { max-width: none; margin-top: 0; }
.lp-seo__row .lp-media img { border-radius: var(--radius-xl); }
@media (max-width: 900px) {
  .lp-seo__row--reverse { display: flex; flex-direction: column-reverse; }
}

/* Cartes tarifaires : le prix ne doit jamais deborder de la carte. */
.lp-prices { gap: var(--space-md); }
.lp-price__amount {
  font-size: clamp(28px, 3.4vw, 46px);
  white-space: nowrap;
  max-width: 100%;
}
.lp-price__unit { font-size: .42em; }
@media (max-width: 1100px) and (min-width: 901px) {
  .lp-price__amount { font-size: clamp(26px, 3vw, 38px); }
}

/* Badge neutre des cartes tarifaires */
.lp-price .lp-badge:not(.lp-badge--sea):not(.lp-badge--magenta) {
  background: var(--surface-raised);
  color: var(--text-primary);
}

/* Barre de reservation : masquee en haut de page, elle glisse a l'ecran des que l'on scrolle. */
.lp-sticky-js .lp-sticky {
  transform: translateY(115%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--duration-base, .35s) var(--ease-standard),
              opacity var(--duration-base, .35s) var(--ease-standard);
  will-change: transform;
}
.lp-sticky-js .lp-sticky.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .lp-sticky-js .lp-sticky { transition: opacity .2s linear; }
}

/* Bouton discret de retour en haut : mobile uniquement, au scroll. */
.lp-top { display: none; }
@media (max-width: 900px) {
  .lp-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 14px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 61;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-full, 999px);
    background: rgba(10, 13, 58, .38);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--duration-base, .35s) var(--ease-standard),
                transform var(--duration-base, .35s) var(--ease-standard);
  }
  .lp-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .lp-top:active { background: rgba(10, 13, 58, .6); }
}

/* Parcours vertical : la fleche descend et reste alignee sous les icones,
   jamais au milieu du texte. */
.lp-journey--vertical .lp-journey__arrow {
  transform: none;
  justify-content: flex-start;
  padding-left: 15px;
  height: 26px;
}
.lp-journey--vertical .lp-journey__arrow::before { transform: rotate(90deg); }
@media (max-width: 900px) {
  .lp-journey--vertical .lp-journey__arrow { padding-left: 13px; }
  .lp-journey--vertical .lp-journey__step { align-items: flex-start; }
}

/* Bloc de maillage interne en fin d'article */
.lp-related {
  max-width: 760px;
  margin: var(--space-section) auto 0;
  padding: var(--space-xl);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .04);
}
.lp-related h2 { margin: 0 0 var(--space-sm); }
.lp-related h2 + ul { margin-bottom: var(--space-lg); }
.lp-related ul { margin: 0; padding-left: 1.1em; }
.lp-related li { margin-bottom: 6px; font-family: var(--font-body); line-height: 1.6; }
.lp-related a { color: var(--color-sea); text-decoration: none; font-weight: 600; }
.lp-related a:hover { text-decoration: underline; }

/* Lecture des articles : colonne etroite et rythme vertical. */
.single-post .entry-content > *,
.single-post .entry-header .entry-title { max-width: 760px; margin-inline: auto; }
.single-post .entry-content h2 { margin-top: var(--space-section); }
.single-post .entry-content h3 { margin-top: var(--space-xl); }
.single-post .entry-content p, .single-post .entry-content li { font-family: var(--font-body); line-height: 1.75; }
.single-post .entry-content ul, .single-post .entry-content ol { padding-left: 1.2em; }
.single-post .entry-content p { margin-bottom: var(--space-md); }
.single-post .post-image { max-width: 760px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   ARTICLE : mise en page de lecture
   -------------------------------------------------------------------------- */
.single-post .featured-image.page-header-image-single {
  max-width: 860px;
  margin: 0 auto var(--space-xl);
  padding: 0 var(--space-md);
}
.single-post .featured-image.page-header-image-single img {
  display: block;
  width: 100%;
  height: clamp(200px, 34vw, 360px);
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.single-post .entry-header { max-width: 760px; margin: 0 auto var(--space-lg); padding: 0 var(--space-md); }
.single-post .entry-title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; }
.single-post .entry-content { padding: 0 var(--space-md); }
.single-post .entry-content > * { max-width: 760px; margin-inline: auto; }
.single-post .entry-content p,
.single-post .entry-content li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
}
.single-post .entry-content p { margin: 0 auto var(--space-md); }
.single-post .entry-content h2 { margin: var(--space-section) auto var(--space-sm); }
.single-post .entry-content h3 { margin: var(--space-xl) auto var(--space-xs); }
.single-post .entry-content ul,
.single-post .entry-content ol { padding-left: 1.2em; margin-bottom: var(--space-md); }
.single-post .entry-content li { margin-bottom: 6px; }
.single-post .entry-content a { color: var(--color-sea); }

/* Encart service en bas d'article */
.lp-post-cta {
  max-width: 760px;
  margin: var(--space-section) auto 0;
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(25, 213, 198, .14), rgba(124, 92, 255, .16));
  border: 1px solid var(--border-hairline);
}
.lp-post-cta__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.lp-post-cta__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 var(--space-md);
  color: var(--text-primary);
  opacity: .85;
}
.lp-post-cta__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
}
.lp-post-cta__links a { color: var(--color-sea); text-decoration: none; }
.lp-post-cta__links a:hover { text-decoration: underline; }
.lp-post-cta__btn {
  background: var(--color-sea);
  color: var(--color-on-sea) !important;
  border-radius: var(--radius-lg);
  padding: 10px 20px;
  font-weight: 700;
}
.lp-post-cta__btn:hover { background: var(--lp-sea-400); text-decoration: none !important; }

/* Trois articles a lire ensuite */
.lp-next { max-width: 1100px; margin: var(--space-section) auto 0; padding: 0 var(--space-md); }
.lp-next__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 var(--space-md);
  color: var(--text-primary);
}
.lp-next__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.lp-next__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border-hairline);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.lp-next__card:hover { transform: translateY(-3px); box-shadow: var(--elevation-1); }
.lp-next__thumb { display: block; overflow: hidden; }
.lp-next__thumb img { display: block; width: 100%; height: 150px; object-fit: cover; }
.lp-next__body { display: block; padding: var(--space-md); }
.lp-next__cat {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-sea);
  margin-bottom: 6px;
}
.lp-next__name {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}
.lp-next__card:hover .lp-next__name { text-decoration: underline; }

@media (max-width: 900px) {
  .lp-next__grid { grid-template-columns: 1fr; }
  .lp-next__card { flex-direction: row; align-items: stretch; }
  .lp-next__thumb { flex: 0 0 108px; }
  .lp-next__thumb img { height: 100%; min-height: 92px; }
  .lp-next__body { flex: 1 1 auto; }
  .lp-post-cta { padding: var(--space-lg); }
  .single-post .featured-image.page-header-image-single img { height: 200px; }
}

/* Aucun bloc de commentaires sur le blog */
.single-post .comments-area,
.single-post #comments,
.single-post .comment-respond { display: none !important; }

/* Photo du parcours sur bureau : format raisonnable, mobile inchange. */
@media (min-width: 901px) {
  #how-it-works .lp-media--4-5 {
    max-width: 360px;
    margin-inline: auto;
    margin-top: var(--space-xl);
  }
  #how-it-works .lp-media--4-5 img {
    max-height: 420px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
  }
}

/* Le titre H1 doit rester visible sur les articles (masque sur les pages). */
.single-post .entry-header,
.single-post .entry-title { display: block !important; }
.single-post .entry-header { text-align: left; }

/* Pied d article : ni categories ni navigation entre articles. */
.single-post .entry-meta,
.single-post footer.entry-meta,
.single-post .cat-links,
.single-post .post-navigation,
.single-post .nav-links,
.single-post .nav-previous,
.single-post .nav-next { display: none !important; }

/* Horaires dans le footer */
.lp-footer__hours {
  font-family: var(--font-body);
  font-size: var(--type-link-sm-size);
  color: var(--text-primary);
  margin-top: var(--space-md);
  max-width: 260px;
  line-height: 1.5;
}
.lp-footer__hours-label {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-sea);
  margin-bottom: 4px;
}

/* Logo du footer cliquable */
.lp-footer__brand { display: inline-block; text-decoration: none; }
.lp-footer__brand:hover .lp-wordmark { opacity: .85; }

/* Accueil : le bloc SEO est place tot dans le code source pour le referencement,
   l'ordre visuel d'origine est restitue par flexbox. */
.home .entry-content { display: flex; flex-direction: column; }
.home .lp-ord-1 { order: 1; }
.home .lp-ord-2 { order: 2; }
.home .lp-ord-3 { order: 3; }
.home .lp-ord-4 { order: 4; }
.home .lp-ord-5 { order: 5; }
.home .lp-ord-6 { order: 6; }
.home .lp-ord-7 { order: 7; }
.home .lp-ord-8 { order: 8; }
.home .lp-ord-9 { order: 9; }
.home .lp-ord-10 { order: 10; }
.home .lp-ord-11 { order: 11; }
.home .lp-ord-12 { order: 12; }

/* Bloc SEO : meme respiration sous le H2 que sous les H3. */
.lp-seo h2 { margin-bottom: var(--space-md); }

/* Securite : jamais d image mise en avant en haut des pages (articles exclus). */
body.page .featured-image.page-header-image-single,
body.page .page-header-image { display: none !important; }