/* ==========================================================================
   Arboresia & Oresia · couche responsive (audit du 30/09/2026)

   Les maquettes portent leurs styles en ligne : les surcharges ci-dessous
   utilisent !important, et uniquement dans des media queries ciblées sur des
   classes r-* posées dans le balisage. Desktop (≥ 1100 px) inchangé, sauf les
   grilles qui laissaient des cases vides.

   Points de rupture : 480 (boutons pleine largeur) · 700 (grilles de 3)
   · 768 (mobile) · 1024 (tablette) · 1100 (menu burger).
   ========================================================================== */

:root {
  --r-pad: clamp(20px, 4vw, 56px);      /* marge latérale des sections */
  --r-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.r-nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Boutons importés (<dc-import name="Bouton">)
   Le style posé sur <dc-import> n'atteint pas l'élément hôte (.sc-host) :
   la largeur se règle donc depuis le groupe parent.
   --------------------------------------------------------------------------- */
.r-btns { display: flex; flex-wrap: wrap; }   /* certains groupes étaient de simples blocs */
.r-btns > .sc-host { flex: 0 0 auto; }
@media (max-width: 479px) {
  .r-btns > .sc-host { flex: 1 1 100%; }
  .r-submit { flex: 1 1 100% !important; }
}

/* ---------------------------------------------------------------------------
   Cibles tactiles ≥ 44 px (écran tactile ou mobile)
   --------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 767px) {
  .r-crumb a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; }
  .r-tap { display: inline-flex !important; align-items: center; min-height: 44px; }
  .r-chips > button, .r-chip-row > button, .r-chip-row3 > button { height: 48px !important; }
}

/* ---------------------------------------------------------------------------
   Rythme vertical : sections moins hautes sur mobile (80 → 64 px)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .r-sec { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* ---------------------------------------------------------------------------
   Hero : ligne de preuve sans point orphelin sur petit écran
   --------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .r-proof { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
  .r-proof-dot { display: none !important; }
}
@media (max-width: 767px) {
  .r-hero-ed-img { aspect-ratio: 4 / 3 !important; }
}
/* Bande de confiance : 2 × 2 au lieu de 4 lignes */
@media (max-width: 599px) {
  .r-trust { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; align-items: start !important; }
  .r-trust > div { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
  .r-trust > div > :first-child { font-size: 34px !important; }
}

/* ---------------------------------------------------------------------------
   Filtres : une seule ligne qui défile au doigt sur mobile
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .r-chips {
    flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--r-pad)) !important; padding-inline: var(--r-pad);
    scroll-padding-inline: var(--r-pad); overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .r-chips::-webkit-scrollbar { display: none; }
  .r-chips > * { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------------
   Rails : listes qui défilent horizontalement (scroll-snap), la carte
   suivante reste visible. Compteur + flèches : assets/responsive.js
   --------------------------------------------------------------------------- */
.r-rail-ctrl { display: none; }
.r-rail-ctrl__count { font: 600 14px/1 Manrope, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.r-rail-ctrl__btns { display: flex; gap: 8px; }
.r-rail-ctrl button {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid currentColor;
  background: transparent; color: inherit; font: 500 18px/1 Manrope, system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity 160ms var(--r-ease), background-color 160ms var(--r-ease);
}
.r-rail-ctrl button:disabled { opacity: 0.3; cursor: default; }
.r-rail-ctrl button:focus-visible { outline: 2px solid #2C6178; outline-offset: 3px; }
.r-rail-ctrl--dark button:focus-visible { outline-color: #A6CE22; }

@media (max-width: 767px) {
  .r-rail {
    display: flex !important; grid-template-columns: none !important; gap: 12px !important;
    overflow-x: auto !important; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--r-pad);
    margin-inline: calc(-1 * var(--r-pad)) !important; padding: 0 var(--r-pad) 4px !important;
  }
  .r-rail::-webkit-scrollbar { display: none; }
  .r-rail > * { flex: 0 0 82% !important; min-width: 0; scroll-snap-align: start; grid-column: auto !important; grid-row: auto !important; }
  .r-rail--wide > * { flex-basis: 86% !important; }
  .r-rail-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .r-rail--tab {
    display: flex !important; grid-template-columns: none !important; gap: 16px !important;
    overflow-x: auto !important; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--r-pad);
    margin-inline: calc(-1 * var(--r-pad)) !important; padding: 0 var(--r-pad) 4px !important;
  }
  .r-rail--tab::-webkit-scrollbar { display: none; }
  .r-rail--tab > * { flex: 0 0 46% !important; min-width: 0; scroll-snap-align: start; }
  .r-rail-ctrl--tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .r-rail, .r-rail--tab { scroll-behavior: auto; } }

/* ---------------------------------------------------------------------------
   Grilles : plus de carte orpheline en tablette, plus de case vide en desktop
   --------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .r-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .r-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px) {
  .r-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* Réalisations des pages Jardin / Piscine (4 projets) */
@media (min-width: 768px) and (max-width: 1099px) {
  .r-real { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px) {
  .r-real { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* Réalisations de l'accueil et articles : vedette en 2 × 2 sur 3 colonnes */
@media (min-width: 768px) and (max-width: 1023px) {
  .r-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-feat-grid > * { grid-column: auto !important; }
}
@media (min-width: 1024px) {
  .r-feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .r-feat-grid > * { grid-column: auto !important; }
  .r-feat-grid > .is-feat { grid-column: span 2 !important; grid-row: span 2; }
  .r-feat-grid > .is-feat > :first-child { aspect-ratio: auto !important; flex: 1 1 auto; min-height: 280px; }
}

/* Image + texte : image bord à bord en 4:3 sur mobile (DESIGN.md § 4.4) */
@media (max-width: 767px) {
  .r-media { aspect-ratio: 4 / 3 !important; max-height: none !important; border-radius: 0 !important;
             width: calc(100% + 2 * var(--r-pad)) !important; max-width: none !important; margin-inline: calc(-1 * var(--r-pad)); }
}

/* Cartes services : image moins haute quand elles sont empilées */
@media (max-width: 699px) {
  .r-svc-img { aspect-ratio: 4 / 3 !important; }
}

/* Étapes de méthode : numéro à gauche du titre sur mobile */
@media (max-width: 699px) {
  .r-step { display: grid !important; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 10px !important; align-items: baseline; }
  .r-step > :first-child { grid-row: span 4; font-size: 44px !important; min-width: 1.4ch; }
  .r-step > :not(:first-child) { grid-column: 2; margin-top: 0 !important; }
}

/* ---------------------------------------------------------------------------
   Conception 3D : galerie
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .r-wide { aspect-ratio: 16 / 9 !important; min-height: 0 !important; }
  .r-gal { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 8px !important; }
  .r-gal > :last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2 / 1 !important; }
}
@media (min-width: 768px) {
  .r-gal { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* ---------------------------------------------------------------------------
   Ma boîte à moustiques : photo produit en tête sous 1024 px
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .r-modele-img { order: -1; flex: 1 1 100% !important; display: flex; justify-content: center; }
  .r-modele-img img { width: min(56%, 240px) !important; max-height: none !important; }
}

/* ---------------------------------------------------------------------------
   Formulaires (devis, candidature)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Le formulaire passe avant les coordonnées */
  .r-devis { gap: 32px !important; }
  .r-devis-left { display: contents !important; }
  .r-devis-intro { order: 0; flex: 1 1 100%; }
  .r-devis-form { order: 1; flex: 1 1 100% !important; }
  .r-devis-details {
    order: 2; flex: 1 1 100%; margin-top: 0 !important;
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px 16px !important;
  }
  .r-devis-details > :first-child { grid-column: 1 / -1; }
  /* Carte de formulaire bord à bord : champs plus larges */
  .r-form-card {
    margin-inline: calc(-1 * var(--r-pad)); border-radius: 0 !important;
    border-left: 0 !important; border-right: 0 !important; box-shadow: none !important;
    padding: 28px var(--r-pad) 32px !important;
  }
}
@media (max-width: 479px) {
  .r-chip-row { display: grid !important; grid-template-columns: 1fr 1fr; }
  .r-chip-row3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r-chip-row > button, .r-chip-row3 > button { width: 100%; padding: 0 6px !important; }
  .r-chip-row3 > button { font-size: 14px !important; }
}

/* ---------------------------------------------------------------------------
   Recrutement : infos de poste en texte (elles ressemblaient à des boutons)
   --------------------------------------------------------------------------- */
.r-meta { gap: 4px 0 !important; }
.r-meta > li { border: 0 !important; padding: 0 !important; font-size: 14px !important; color: #6E6254; }
.r-meta > li:not(:last-child)::after { content: "·"; margin: 0 10px; color: #A39279; }  /* le point reste en fin de ligne */

/* ---------------------------------------------------------------------------
   Actualités : liste compacte sur mobile, pagination condensée
   --------------------------------------------------------------------------- */
.r-pager-info { display: none; }
@media (max-width: 767px) {
  .r-news { gap: 0 !important; }
  .r-news > .is-first { margin-bottom: 12px; }
  .r-news-item:not(.is-first) {
    flex-direction: row !important; align-items: flex-start; gap: 16px;
    background: transparent !important; border: 0 !important; border-bottom: 1px solid #DDD2BF !important;
    border-radius: 0 !important; box-shadow: none !important; transform: none !important; padding: 20px 0;
  }
  .r-news-item:not(.is-first) .r-news-media { flex: 0 0 104px; aspect-ratio: 1 / 1 !important; border-radius: 4px; }
  .r-news-item:not(.is-first) .r-news-body { padding: 0 !important; gap: 6px !important; }
  .r-news-item:not(.is-first) .r-news-excerpt,
  .r-news-item:not(.is-first) .r-news-more { display: none !important; }
  .r-news-item:not(.is-first) h2 {
    font-family: Manrope, system-ui, sans-serif !important; font-weight: 600 !important;
    font-size: 17px !important; line-height: 1.35 !important; margin-top: 2px !important;
  }
  .r-pager { justify-content: space-between !important; }
  .r-pager-num { display: none !important; }
  .r-pager-info { display: flex; align-items: center; height: 48px; font-size: 15px; font-weight: 600; color: #26221D; font-variant-numeric: tabular-nums; }
}
/* Tablette : pas d'article vedette sur 2 colonnes (il laissait une carte orpheline) */
@media (min-width: 768px) and (max-width: 1023px) {
  .r-news > * { grid-column: auto !important; }
}

/* ---------------------------------------------------------------------------
   Pied de page
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .r-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 36px 16px !important; }
  .r-foot-brand, .r-foot-ent { grid-column: 1 / -1; }
  .r-foot-ent { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .r-foot-ent > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .r-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (pointer: coarse), (max-width: 767px) {
  .r-foot-col { gap: 0 !important; }
  .r-foot-col > :first-child { margin-bottom: 4px; }
  .r-foot-col a, .r-foot-legal a { display: inline-flex !important; align-items: center; min-height: 44px; }
  .r-foot-legal a { min-width: 44px; justify-content: center; }
}
/* Barre d'action collante : centrée sur tablette */
@media (min-width: 768px) {
  .r-actionbar { padding-inline: max(16px, calc((100% - 560px) / 2)) !important; }
}