/*
Theme Name: Les Maîtres du Ménage
Theme URI: https://lesmaitresdumenage.com
Description: Thème custom du site vitrine Les Maîtres du Ménage (conciergerie de ménage haut de gamme, Marrakech). 4 pages FR + 4 pages EN, orienté conversion WhatsApp et SEO.
Author: Franck Milenkovic
Version: 1.0.0
Requires PHP: 8.1
Text Domain: lesmaitresdumenage
*/

/* Typographie et doré : une seule famille, doré lisible sur fond clair */
:root {
  --lmm-font: 'Schibsted Grotesk', system-ui, sans-serif;
  --or-texte: #8A6A2B;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #FBF8F1;
  font-family: var(--lmm-font);
  color: #1D2B44;
}

/* Grain de papier : l'ivoire cesse d'être une couleur d'écran pour devenir une matière.
   SVG intégré au CSS, environ 400 octets, aucune requête réseau. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* le contenu passe au-dessus du grain */
body > * {
  position: relative;
  z-index: 1;
}

/* Séparateur ciselé : ouverture de section */
.sep {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto 20px;
}

.sep-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C2A15F);
}

.sep-line--right {
  background: linear-gradient(270deg, transparent, #C2A15F);
}

/* Conteneur centré : plafonne le contenu sans contraindre les fonds de section */
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Arche : cadre des photos (filet dore, 9px d'air), page locations. */
.arch {
  border-radius: 160px 160px 6px 6px;
  border: 1px solid #C2A15F;
  padding: 9px;
  flex-shrink: 0;
}

.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 151px 151px 4px 4px;
}

a {
  color: #16243E;
  text-decoration: none;
}

a:hover {
  color: var(--or-texte);
}

input,
textarea {
  font-family: var(--lmm-font);
}

input:focus,
textarea:focus {
  outline: 2px solid #C2A15F;
  outline-offset: -1px;
}

@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.step-in {
  animation: stepIn .4s ease both;
}

/* Cartes du wizard (bien, taille, formule, fréquence) */
.wcard {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  padding: 22px 16px;
  text-align: center;
  transition: transform .28s cubic-bezier(.34, 1.4, .64, 1), box-shadow .28s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}

.wcard--off {
  border: 1px solid #D8CFBA;
  background: #FBF8F1;
  color: #16243E;
}

.wcard--on {
  border: 1px solid #16243E;
  background: #16243E;
  color: #F9F5EC;
  box-shadow: 0 10px 26px rgba(22, 36, 62, .18);
}

.wcard-dot { color: var(--or-texte) }
.wcard--on .wcard-dot { color: #C2A15F }

.wcard:hover {
  transform: translateY(-4px);
  border-color: #C2A15F;
  box-shadow: 0 16px 32px rgba(22, 36, 62, .16);
}

/* Puces récap de l'étape Envoi */
.rchip {
  cursor: pointer;
  border: 1px solid #D8CFBA;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: #16243E;
  background: #FBF8F1;
  transition: all .18s ease;
}

.rchip:hover {
  border-color: #C2A15F;
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 36, 62, .08);
}

/* Champs du formulaire final */
.winput {
  border: 1px solid #D8CFBA;
  border-radius: 4px;
  padding: 13px 14px;
  font-size: 14.5px;
  color: #1D2B44;
  background: #FBF8F1;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.winput:hover {
  border-color: #C2A15F;
  box-shadow: 0 3px 10px rgba(194, 161, 95, .14);
}

/* Bouton WhatsApp du wizard */
.wa-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #7C8F6E;
  color: #fff;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15.5px;
  transition: all .22s ease;
}

.wa-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(124, 143, 110, .45);
  background: #71855F;
  color: #fff;
}

.back-link {
  cursor: pointer;
  font-size: 13px;
  color: #8B8268;
  transition: color .15s ease;
}

.back-link:hover {
  color: #16243E;
}

/* Pastilles de progression cliquables (étapes déjà accessibles) */
.pdot-clickable {
  cursor: pointer;
}

/* Boutons du wizard : retour, puces du récap (cibles tactiles 44 px) */
button.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-family: inherit;
}

button.rchip {
  min-height: 44px;
  font-family: inherit;
}

/* Crayon des puces du récap : doré foncé, lisible sur fond clair */
.rchip-pen { color: var(--or-texte) }

.wcard:focus-visible,
.pdot-clickable:focus-visible,
button.rchip:focus-visible,
button.back-link:focus-visible {
  outline: 2px solid #C2A15F;
  outline-offset: 3px;
}

/* La question reçoit le focus à chaque étape (lecteurs d'écran), sans cadre visible */
[data-step] h2:focus { outline: none }

/* Petit écran : seule l'étape en cours garde son libellé, les pastilles tiennent sur une ligne */
@media (max-width: 520px) {
  #lmm-progress [data-dot]:not([aria-current]) [data-dot-lbl] { display: none }
}

/* ============ Mouvement ============ */

@keyframes lmmRise {
  from { opacity: 0; transform: translateY(18px) }
  to   { opacity: 1; transform: none }
}

@keyframes lmmDraw {
  from { transform: scaleX(0); opacity: 0 }
  to   { transform: scaleX(1); opacity: 1 }
}

/* état masqué : uniquement quand le script a pris la main */
.js-anim [data-reveal] > * { opacity: 0 }

.js-anim [data-reveal].is-in > * {
  animation: lmmRise .62s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* les liserés se tracent au lieu d'apparaître */
.js-anim [data-reveal] .sep-line { transform: scaleX(0) }

.js-anim [data-reveal].is-in .sep-line {
  animation: lmmDraw .9s ease .1s both;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal] > *,
  .js-anim [data-reveal].is-in > *,
  .js-anim [data-reveal] .sep-line {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* M3 : l'arche se dévoile de bas en haut, comme un rideau qu'on lève */
@keyframes lmmArch {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(10px) }
  to   { opacity: 1; clip-path: inset(0 0 0 0);   transform: none }
}

.js-anim [data-reveal-arch] .arch { opacity: 0 }

.js-anim [data-reveal-arch].is-in .arch {
  animation: lmmArch 1.05s cubic-bezier(.22, .61, .36, 1) both;
}

.js-anim [data-reveal-arch].is-in .arch:nth-child(1) { animation-delay: .10s }
.js-anim [data-reveal-arch].is-in .arch:nth-child(2) { animation-delay: .22s }
.js-anim [data-reveal-arch].is-in .arch:nth-child(3) { animation-delay: .34s }

/* sur mobile la galerie défile horizontalement : animer les arches suivantes
   pendant que l'utilisateur fait défiler donne un rendu erratique */
@media (max-width: 1000px) {
  .js-anim [data-reveal-arch].is-in .arch:nth-child(n + 2) {
    animation: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal-arch] .arch,
  .js-anim [data-reveal-arch].is-in .arch {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ============ Deroule en filet vertical (pages de service) ============ */

/* steps-filet : "comment ca marche" en filet vertical continu, pour ne
   plus enchainer deux grilles a trois colonnes d'affilee avec les packs. */
.steps-filet {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  padding-left: 64px;
}

.steps-filet::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #D8CFBA;
}

.steps-filet .step {
  position: relative;
  padding: 0 0 42px;
}

.steps-filet .step:last-child {
  padding-bottom: 0;
}

.steps-filet .step .n {
  position: absolute;
  left: -64px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FBF8F1;
  border: 1px solid #C2A15F;
  color: var(--or-texte);
  font-family: var(--lmm-font);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.steps-filet .step .t {
  font-weight: 500;
  font-size: 17px;
  color: #16243E;
  margin-bottom: 6px;
}

.steps-filet .step .b {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;
  color: #5A6376;
  max-width: 560px;
}

@media (max-width: 1000px) {
  .steps-filet {
    padding-left: 52px;
  }

  .steps-filet .step .n {
    left: -52px;
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

/* ============================================================
   CHANTIER 2026-08-25 : logo, slogan, ruban promo, mobile-first
   ------------------------------------------------------------
   Tout ce bloc est ecrit en mobile-first : les valeurs de base
   decrivent le rendu a 360px, les @media (min-width) elargissent.

   Il est groupe EN FIN DE FICHIER a dessein. Une media query
   n ajoute aucune specificite, elle ne gagne que par l ordre :
   place avant, ce bloc serait ecrase par les @media (max-width)
   des sections precedentes. Ne rien deplacer au-dessus.

   Dans chaque sous-bloc : valeurs de base d abord, @media ensuite.
   Paliers : 760px (navigation), 860px (tableau des tarifs).
   ============================================================ */

/* Surface tactile de 44px sans changer la taille visuelle.
   A poser sur tout element interactif trop petit pour le doigt. */
.tap {
  position: relative;
}

.tap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* ---------- En-tete ---------- */

header {
  background: #FBF8F1;
  padding: 0 clamp(20px, 4vw, 56px);
  position: relative;
  z-index: 60;
}

.hdr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

.brand {
  order: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  line-height: 1;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #16243E;
  flex: none;
  display: block;
}

.brand-txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.brand-name {
  font-family: var(--lmm-font);
  font-size: 19px;
  font-weight: 500;
  color: #16243E;
  letter-spacing: -.01em;
}

/* Sous 760px le slogan ne tient pas a cote du medaillon sans devenir
   illisible. Il est porte par le hero et par le pied de page. */
.brand-tag {
  display: none;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or-texte);
}

.burger {
  order: 3;
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.burger span {
  width: 22px;
  height: 1.5px;
  background: #16243E;
  transition: transform .22s ease, opacity .22s ease;
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

.nav-panel {
  order: 4;
  flex: 1 0 100%;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0 14px;
}

.nav-panel.open {
  display: flex;
}

.hdr-nav {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  color: #5A6376;
}

.hdr-nav a {
  padding: 12px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #F0EADA;
}

.hdr-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.lang {
  border: 1px solid #D8CFBA;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 12.5px;
  display: flex;
  gap: 9px;
  align-items: center;
}

.lang-sep { color: #D8CFBA }

/* Les cibles tactiles FR et EN font chacune 44x44 via .tap::after, mais
   leurs zones invisibles se chevauchent d environ 9 a 10px de part et
   d autre du separateur : un doigt qui vise l une peut declencher
   l autre. On ecarte les deux zones invisibles vers l exterieur sans
   toucher au texte visible ni a la hauteur du selecteur : l apparence
   de la pastille reste identique, seul l ecartement horizontal des
   cibles change. Valable sous 760px comme au-dessus, aucune media
   query necessaire ici. */
.lang a.tap:first-of-type::after { transform: translate(-50%, -50%) translateX(-9px) }
.lang a.tap:last-of-type::after  { transform: translate(-50%, -50%) translateX(9px) }

.cta {
  background: #16243E;
  color: #F9F5EC;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Verrou de defilement pose par nav.js pendant que le panneau est ouvert. */
body.nav-open {
  overflow: hidden;
}

@media (min-width: 760px) {
  .hdr {
    flex-wrap: nowrap;
    padding: 20px 0;
    gap: 18px;
  }

  .burger { display: none }

  /* Le panneau s efface en tant que boite : ses deux enfants
     redeviennent des cases du flex de l en-tete. Une seule
     structure sert les deux affichages, zero duplication. */
  .nav-panel {
    display: contents;
  }

  /* Les deux blocs lateraux ont la MEME largeur imposee, donc la
     marque est au centre geometrique. C est ce qui rend impossible
     le decalage de `entete-trois-blocs-le-centre-n-est-pas-centre`. */
  .hdr-nav {
    order: 0;
    flex: 1 1 0;
    flex-direction: row;
    gap: 26px;
    font-size: 13.5px;
    min-width: 0;
  }

  .hdr-nav a {
    padding: 0;
    min-height: 0;
    border-bottom: 0;
    display: inline;
  }

  .brand {
    order: 1;
    flex: 0 0 auto;
    justify-content: center;
    text-align: center;
  }

  .brand-mark { width: 44px; height: 44px }

  .brand-name { font-size: clamp(21px, 3vw, 27px) }

  .brand-tag { display: block }

  .hdr-actions {
    order: 2;
    flex: 1 1 0;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 0;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .lang { padding: 4px 11px; font-size: 11.5px }

  .cta { flex: 0 0 auto; padding: 10px 20px; font-size: 13px; min-height: 0 }
}

/* ---------- Ruban promo defilant ---------- */

.ticker {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #16243E;
  color: #E7D3A8;
  min-height: 44px;
  font-size: 13px;
  letter-spacing: .05em;
  text-decoration: none;
}

/* `width:max-content` fait que la piste vaut exactement deux fois un
   exemplaire. Une translation de -50% avance donc d un exemplaire
   pile, et la boucle est sans couture quelle que soit la langue. */
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 18s linear infinite;
}

/* Un exemplaire doit etre au moins aussi large que l ecran : sinon,
   au milieu du cycle (translateX(-50%), soit un exemplaire entier),
   il reste moins de contenu a droite que la largeur de l ecran et la
   piste se vide avant la fin du cycle (trou visible sur ecran large).
   min-width:100vw garantit qu un exemplaire seul remplit toujours
   l ecran ; ne pas retirer cette regle pour "simplifier". */
.ticker-item {
  white-space: nowrap;
  padding-right: 64px;
  min-width: 100vw;
  box-sizing: border-box;
}

/* Depuis que chaque exemplaire fait au moins une largeur d ecran, la
   distance parcourue par cycle (translateX(-50%), un exemplaire) vaut
   la largeur de l ecran, pas une valeur fixe. Une duree fixe (18s)
   donnerait donc une vitesse qui double sur grand ecran (registre
   promo de discounter, contraire a la consigne du projet : rester
   lent et pose, entre 40 et 50 px/s). Ces paliers rallongent la duree
   avec la largeur d ecran pour garder la vitesse dans cette fourchette
   a tous les paliers, mesures reelles a l appui (voir le rapport) ;
   ne pas revenir a une duree unique, et ne pas retirer les paliers
   au-dela de 1500px : sans eux la vitesse repart a la hausse sur les
   ecrans larges courants (1920, 2560px). */
@media (min-width: 810px) {
  .ticker-track { animation-duration: 20.2s }
}

@media (min-width: 1010px) {
  .ticker-track { animation-duration: 25s }
}

@media (min-width: 1250px) {
  .ticker-track { animation-duration: 31s }
}

@media (min-width: 1500px) {
  .ticker-track { animation-duration: 36s }
}

@media (min-width: 1750px) {
  .ticker-track { animation-duration: 43.5s }
}

@media (min-width: 2160px) {
  .ticker-track { animation-duration: 53.5s }
}

@media (min-width: 2650px) {
  .ticker-track { animation-duration: 66s }
}

@keyframes ticker {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}

.ticker:hover .ticker-track,
.ticker:focus-visible .ticker-track,
.ticker:focus-within .ticker-track {
  animation-play-state: paused;
}

/* Sans mouvement, le message doit rester lisible EN ENTIER : il repasse
   en texte centre qui se replie, et la seconde copie disparait. */
@media (prefers-reduced-motion: reduce) {
  .ticker {
    padding: 9px 20px;
    justify-content: center;
  }

  .ticker-track {
    width: auto;
    animation: none;
  }

  .ticker-item {
    white-space: normal;
    padding-right: 0;
    min-width: 0;
    text-align: center;
  }

  .ticker-item[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- Hero : slogan ---------- */

.hero-slogan {
  font-family: var(--lmm-font);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--or-texte);
  margin: 0 0 12px;
}

/* ---------- Pied de page ---------- */

.foot-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #16243E;
  display: block;
  margin: 0 auto 10px;
  /* Le fond navy cuit dans le webp (27,40,59) n est pas exactement le
     navy de la charte (22,36,62) : sur l aplat du pied de page, l ecart
     dessine un bord accidentel. Un filet or le rend intentionnel plutot
     que de recolorer l image, ce qui risquerait de toucher le medaillon
     lui-meme. box-shadow et non border : une bordure augmenterait la
     boite et casserait les tailles de 40 et 44px. */
  box-shadow: 0 0 0 1px rgba(194, 161, 95, .35);
}

.foot-tag {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C2A15F;
  margin-bottom: 26px;
}

/* ---------- Pastille WhatsApp flottante ---------- */

/* Base = telephone : cercle de 56px, icone seule. En pilule avec texte,
   elle recouvrait 54x38px de la premiere arche et une partie des CTA
   du hero a 375px. */
.wa-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #7C8F6E;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-shadow: 0 8px 24px rgba(22, 36, 62, .28);
  font-size: 13.5px;
  font-weight: 500;
}

.wa-icon {
  width: 26px;
  height: 26px;
  display: inline-block;
  flex: none;
}

.wa-label {
  display: none;
}

@media (min-width: 760px) {
  .foot-mark { width: 44px; height: 44px }

  .wa-float {
    right: 26px;
    bottom: 26px;
    width: auto;
    height: auto;
    /* box-sizing par defaut est content-box ici : sans le passer en
       border-box, min-height s ajouterait AU-DESSUS des 26px de padding
       vertical (13px haut + bas) et gonflerait la pilule a 70px au lieu
       de la plafonner a 44px. */
    box-sizing: border-box;
    min-height: 44px;
    border-radius: 999px;
    padding: 13px 22px;
    gap: 9px;
    white-space: nowrap;
  }

  .wa-icon { width: 18px; height: 18px }

  .wa-label { display: inline }
}

/* ---------- Page offre de lancement ---------- */

.promo-hero,
.promo-what,
.promo-prices,
.promo-cond {
  padding: 44px clamp(20px, 4vw, 56px);
}

.promo-hero  { background: #F3ECDD }
.promo-what  { background: #FBF8F1 }
.promo-prices { background: #FBF8F1 }
.promo-cond  { background: #F3ECDD }

.promo-eyebrow {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or-texte);
  margin-bottom: 14px;
}

.promo-h1 {
  font-family: var(--lmm-font);
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.12;
  font-weight: 500;
  color: #16243E;
  margin: 0 0 18px;
  text-wrap: balance;
  letter-spacing: -.02em;
}

.promo-h1 em { color: var(--or-texte); font-style: italic; font-weight: 400 }

.promo-h2 {
  font-family: var(--lmm-font);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 500;
  color: #16243E;
  margin: 0 0 18px;
  letter-spacing: -.015em;
}

.promo-intro {
  font-size: 16px;
  line-height: 1.65;
  color: #5A6376;
  max-width: 620px;
  margin: 0 0 26px;
}

.promo-cta {
  background: #16243E;
  color: #F9F5EC;
  padding: 15px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.promo-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: #5A6376;
  border-bottom: 1px solid #C2A15F;
  padding-bottom: 2px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.promo-list,
.promo-cond-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.promo-list li,
.promo-cond-list li {
  font-size: 15px;
  line-height: 1.6;
  color: #5A6376;
  padding-left: 22px;
  position: relative;
}

.promo-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--or-texte);
}

.promo-cond-list {
  counter-reset: cond;
}

.promo-cond-list li::before {
  counter-increment: cond;
  content: counter(cond) ".";
  position: absolute;
  left: 0;
  color: var(--or-texte);
}

.promo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.promo-card {
  background: #fff;
  border: 1px solid #E6DEC9;
  border-radius: 6px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 12px;
}

.promo-card-k { font-weight: 500; color: #16243E; font-size: 15px }
.promo-card-v { font-size: 20px; color: #16243E; font-weight: 600; text-align: right }
.promo-card-l { font-size: 12px; color: #8B8268; grid-column: 1 / -1 }

.promo-note {
  font-size: 12.5px;
  color: #8B8268;
  margin: 0 0 30px;
}

.promo-back { margin: 0 0 8px; font-size: 14px }

.promo-back a {
  border-bottom: 1px solid #C2A15F;
  padding-bottom: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.promo-final {
  background: #16243E;
  color: #F9F5EC;
  border-radius: 6px;
  padding: 32px 24px;
  margin-top: 30px;
  text-align: center;
}

.promo-final-t {
  font-family: var(--lmm-font);
  font-size: 26px;
  margin-bottom: 10px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.promo-final-s {
  font-size: 14.5px;
  line-height: 1.6;
  color: #C3CBDB;
  margin: 0 0 20px;
}

.promo-final .promo-cta { background: #C2A15F; color: #16243E }
.promo-final .promo-alt { color: #C3CBDB }

@media (min-width: 760px) {
  .promo-hero,
  .promo-what,
  .promo-prices,
  .promo-cond {
    padding: 68px clamp(20px, 4vw, 56px);
  }

  .promo-cta { display: inline-flex }

  .promo-grid { grid-template-columns: repeat(3, 1fr) }

  .promo-final { padding: 44px 50px }
}

/* ---------- Grille tarifaire ---------- */

/* Base = telephone : une carte par ligne. Le tableau ne reapparait
   qu au-dessus de 860px, ou cinq colonnes de prix tiennent vraiment.
   Consequence : plus d overflow-x, donc plus de glissement lateral
   invisible qui poussait Pack 4 et Pack 8 hors de l ecran. */
.ptable-head {
  display: none;
}

.prow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  background: #fff;
  border: 1px solid #E6DEC9;
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.prow-hl {
  background: #FBF8F1;
  border-left: 3px solid #C2A15F;
}

.pbien {
  grid-column: 1 / -1;
  font-weight: 500;
  color: #16243E;
  font-size: 15px;
}

.pform {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #5A6376;
  margin-bottom: 6px;
}

.pform-hl {
  color: var(--or-texte);
  font-weight: 500;
}

.pcell {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14.5px;
  color: #16243E;
  padding: 3px 0;
}

/* L etiquette vient de l attribut : le libelle n existe qu une fois
   dans le HTML, il n y a pas de seconde copie a maintenir. */
.pcell::before {
  content: attr(data-l);
  color: #8B8268;
  font-size: 13px;
  font-weight: 400;
}

.pcell-strong { font-weight: 600 }

.ptable-note {
  font-size: 12.5px;
  color: #8B8268;
  background: #F3ECDD;
  border-radius: 6px;
  padding: 14px 18px;
}

@media (min-width: 860px) {
  .ptable {
    border: 1px solid #C2A15F;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
  }

  .ptable-head,
  .prow {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 16px 30px;
  }

  .ptable-head {
    background: #16243E;
    color: #E7D3A8;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .ptable-head span:nth-child(n + 3) { text-align: right }

  .prow {
    border: 0;
    border-bottom: 1px solid #F0EADA;
    border-radius: 0;
    margin-bottom: 0;
    background: #fff;
  }

  .prow-hl {
    background: #FBF8F1;
    border-left: 0;
  }

  /* Le nom du bien reste dans le DOM, il devient invisible : le
     groupement visuel des paires Basic/Confort est preserve. */
  .pbien-rep { visibility: hidden }

  .pbien,
  .pform,
  .pcell {
    grid-column: auto;
    margin-bottom: 0;
    padding: 0;
    display: block;
    text-align: right;
  }

  .pbien,
  .pform { text-align: left }

  .pcell::before { display: none }

  .ptable-note {
    border-radius: 0;
    padding: 14px 30px;
  }
}

/* ---------- Rappel de l offre (accueil et page locations saisonnieres) ---------- */

.offre-short {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  border: 1px solid #C2A15F;
  border-radius: 6px;
  padding: 30px 24px;
  background: #fff;
}

.offre-badge {
  width: 110px;
  height: 110px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #C2A15F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lmm-font);
  font-size: 15px;
  color: var(--or-texte);
  line-height: 1.3;
}

.offre-title {
  font-family: var(--lmm-font);
  font-size: clamp(22px, 4vw, 30px);
  color: #16243E;
  margin-bottom: 14px;
  font-weight: 500;
  letter-spacing: -.015em;
}

.offre-title em { color: var(--or-texte); font-style: italic; font-weight: 400 }

.offre-link {
  border-bottom: 1px solid #C2A15F;
  padding-bottom: 2px;
  font-size: 15px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.offre-tva {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: #8B8268;
}

@media (min-width: 760px) {
  .offre-short {
    flex-direction: row;
    text-align: left;
    gap: 40px;
    padding: 40px 50px;
  }

  .offre-badge { width: 130px; height: 130px }
}

/* ---------- Mouvement reduit sur .step-in ---------- */

/* .step-in (etapes du wizard /contact/) a sa propre regle prefers-reduced-motion,
   placee apres le bloc CHANTIER et non a cote de @keyframes stepIn : une media
   query ne gagne rien en specificite, seulement par ordre. */
@media (prefers-reduced-motion: reduce) {
  .wcard, .rchip, .wa-send { transition: none !important }
  .wcard:hover, .rchip:hover, .wa-send:hover { transform: none !important }
  .step-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Page locations saisonnières : hero et bloc produits, une colonne puis deux colonnes dès 860px. */
.loc-hero { padding: 40px clamp(20px, 4vw, 56px) 40px }
.loc-hero-grid, .loc-prod {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.loc-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px }
.loc-hero-photo { order: -1; max-width: 300px; width: 100%; justify-self: center }
.loc-prod-photo { max-width: 300px; width: 100%; justify-self: center }
/* Quatre cartes produit : une colonne, puis 2x2 (jamais 3+1). Entre 860 et 1023px la colonne est etroite : une seule colonne. */
.loc-prod-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px }
@media (min-width: 560px) { .loc-prod-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 860px) { .loc-prod-cards { grid-template-columns: minmax(0, 1fr) } }
@media (min-width: 1024px) { .loc-prod-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 860px) {
  .loc-hero { padding-top: 56px; padding-bottom: 48px }
  .loc-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) }
  .loc-hero-photo { order: 0; max-width: 360px }
  .loc-prod { grid-template-columns: minmax(0, 340px) minmax(0, 1fr) }
  .loc-prod-photo { max-width: none }
}

/* ---------- Pages de service (bureaux, particuliers, nounous) ----------
   Mobile-first comme le bloc CHANTIER : valeurs de base pour 360px,
   paliers en min-width uniquement. Briques communes (svc-*) puis une
   composition par page (bx- bureaux, pt- particuliers, nn- nounous),
   pour que les trois pages et l accueil ne se ressemblent pas. */
.nw { white-space: nowrap }

.svc-hero { padding: 28px clamp(20px, 4vw, 56px) 44px }
.svc-eyebrow {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or-texte);
  margin: 0 0 16px;
}
.svc-h1 {
  font-family: var(--lmm-font);
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.025em;
  color: #16243E;
  margin: 0 0 20px;
  text-wrap: balance;
}
.svc-h1 em { font-weight: 400; color: var(--or-texte) }
.svc-intro {
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.65;
  color: #5A6376;
  max-width: 33em;
  margin: 0;
  text-wrap: pretty;
}
.svc-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: 26px;
}
.svc-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  color: #16243E;
  text-decoration: none;
  border-bottom: 1px solid #C2A15F;
}
.svc-more:hover { color: var(--or-texte) }
.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  background: #C2A15F;
  color: #16243E;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  transition: background-color .2s ease;
}
.svc-btn:hover { background: #E7D3A8; color: #16243E }
/* Prix en ligne sous l appel au devis (particuliers, nounous). */
.svc-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 22px 0 0;
  font-size: 14px;
  color: #5A6376;
}
.svc-act .svc-tag { margin: 0 }
.svc-tag span:first-child {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or-texte);
}
.svc-tag b { font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: #16243E }

/* Sections */
.svc-sec { padding: 52px clamp(20px, 4vw, 56px); border-top: 1px solid #E6DEC9 }
.svc-sec--sable { background: #F3ECDD; border-top: 0 }
.svc-sec--sable + .svc-sec { border-top: 0 }
.svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.svc-h2 {
  font-family: var(--lmm-font);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #16243E;
  margin: 0;
  text-wrap: balance;
}
.svc-h2--sm { font-size: clamp(22px, 2.4vw, 28px) }
.svc-h2--lead { margin-bottom: 30px; max-width: 22em }
.svc-head { display: grid; gap: 14px; margin-bottom: 30px }
.svc-lede {
  font-size: 16px;
  line-height: 1.65;
  color: #5A6376;
  margin: 0;
  max-width: 36em;
  text-wrap: pretty;
}
.svc-note {
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 2px solid #C2A15F;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5A6376;
  max-width: 46em;
}

/* Liste filetee (nounous : ce que la famille nous dit). */
.svc-incl {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.svc-incl li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid #D8CFBA;
  font-size: 16px;
  line-height: 1.5;
  color: #16243E;
}
.svc-incl li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 22px;
  width: 6px;
  height: 6px;
  background: #C2A15F;
  transform: rotate(45deg);
}

/* Deroule en trois etapes : une structure, trois traitements. */
.svc-steps { list-style: none; margin: 0; padding: 0 }
.svc-steps .step .t {
  font-family: var(--lmm-font);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  color: #16243E;
  margin: 0 0 6px;
}
.svc-steps .step .b { font-size: 14.5px; line-height: 1.65; color: #5A6376; margin: 0; max-width: 34em }
.svc-steps .step .n {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FBF8F1;
  border: 1px solid #C2A15F;
  color: var(--or-texte);
  font-size: 17px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* filet : vertical (particuliers), reprend .steps-filet */
.svc-steps--filet { margin: 0; padding-left: 52px }
.svc-steps--filet .step .n { top: -6px }
/* frise : horizontale des 760px (bureaux) */
.svc-steps--frise { display: grid; gap: 22px }
.svc-steps--frise .step { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px }
.svc-steps--frise .step .n { grid-row: 1 / span 2 }
.svc-steps--frise .step .t, .svc-steps--frise .step .b { grid-column: 2 }
/* cartes : numeros en italique (nounous) */
.svc-steps--cartes { display: grid; gap: 14px }
.svc-steps--cartes .step {
  background: #fff;
  border: 1px solid #E6DEC9;
  border-radius: 8px;
  padding: 24px 24px 26px;
}
.svc-steps--cartes .step .n {
  width: auto;
  height: auto;
  border: 0;
  background: none;
  justify-content: flex-start;
  font-size: 40px;
  line-height: 1;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 14px;
}

/* Questions frequentes : details/summary, ouvrable sans JavaScript. */
.svc-faq { border-top: 1px solid #D8CFBA }
.svc-faq details { border-bottom: 1px solid #D8CFBA }
.svc-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: #16243E;
}
.svc-faq summary::-webkit-details-marker { display: none }
.svc-faq summary::after {
  content: '+';
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid #C2A15F;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--or-texte);
  transition: transform .25s ease;
}
.svc-faq details[open] summary::after { transform: rotate(45deg) }
.svc-faq summary:hover { color: var(--or-texte) }
.svc-faq summary:focus-visible { outline: 2px solid #C2A15F; outline-offset: 4px }
.svc-faq details p {
  margin: 0;
  padding: 0 52px 22px 0;
  font-size: 15px;
  line-height: 1.7;
  color: #5A6376;
  max-width: 40em;
}
/* Liens croises vers les autres services (cahier SEO §5). */
.svc-links { list-style: none; margin: 24px 0 0; padding: 0 }
.svc-links li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  padding: 8px 0;
  border-top: 1px solid #E6DEC9;
  font-size: 14.5px;
  color: #5A6376;
}
.svc-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: #16243E;
  font-weight: 500;
  border-bottom: 1px solid #C2A15F;
}
.svc-links a:hover { color: var(--or-texte) }

@media (min-width: 760px) {
  .svc-steps--frise { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px }
  .svc-steps--frise::before {
    content: '';
    position: absolute;
    left: 19px;
    right: 0;
    top: 19px;
    height: 1px;
    background: #D8CFBA;
  }
  .svc-steps--frise .step { display: block; position: relative }
  .svc-steps--frise .step .n { margin-bottom: 18px }
  .svc-steps--cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
}
@media (min-width: 860px) {
  .svc-hero { padding-top: 52px; padding-bottom: 68px }
}
/* .steps-filet passe de 52 a 64px de retrait au-dessus de 1000px */
@media (min-width: 1001px) {
  .svc-steps--filet { padding-left: 64px }
}
@media (min-width: 960px) {
  .svc-sec { padding-top: 76px; padding-bottom: 76px }
  .svc-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px) }
  .svc-faq-side { position: sticky; top: 28px }
  .svc-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: 40px }
}

/* ---- Bureaux : deux arches (photo, prix), fiche d entretien, abonnement par surface, creneaux ---- */
.bx-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px }
.bx-arches {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  align-items: end;
  height: clamp(300px, 84vw, 440px);
}
.bx-arch {
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  padding: clamp(5px, .6vw, 8px);
  border: 1px solid #C2A15F;
  border-radius: 300px 300px 6px 6px;
}
.bx-arch--px { height: 80% }
.bx-arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 300px 300px 3px 3px;
}
.bx-px {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 8px 18px;
  border-radius: 300px 300px 3px 3px;
  background: #16243E;
  color: #F9F5EC;
  text-align: center;
}
.bx-px-label {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C2A15F;
  margin: 0 0 10px;
}
.bx-px-v { display: flex; flex-direction: column; gap: 2px; margin: 0; line-height: 1.05 }
.bx-px-from { font-size: 15px; font-style: italic; color: #E7D3A8 }
.bx-px-v b {
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: #fff;
}
.bx-px-unit { font-size: 14px; color: #C3CBDB }
.bx-px-note {
  margin: 16px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(231, 211, 168, .3);
  max-width: 15em;
  font-size: 12.5px;
  line-height: 1.5;
  color: #C3CBDB;
}

.bx-types { padding: 0 clamp(20px, 4vw, 56px) }
.bx-types-in {
  display: grid;
  gap: 12px;
  padding: 26px 0 30px;
  border-top: 1px solid #E6DEC9;
}
.bx-types-tx { font-size: 15px; line-height: 1.6; color: #5A6376; margin: 0; max-width: 36em }
.bx-pills { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.bx-pills li {
  padding: 8px 16px;
  border: 1px solid #D8CFBA;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  color: #16243E;
}

.bx-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 48px;
  border-top: 1px solid #D8CFBA;
}
.bx-checks li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid #D8CFBA;
}
.bx-checks li::before {
  content: '✓';
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border: 1px solid #C2A15F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--or-texte);
  box-sizing: border-box;
}
.bx-checks h3 { grid-column: 2; margin: 2px 0 2px; font-size: 17px; font-weight: 500; color: #16243E }
.bx-checks p { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.55; color: #5A6376 }

.bx-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 20px 0 0 }
.bx-formula span {
  padding: 8px 16px;
  border: 1px solid #16243E;
  border-radius: 999px;
  font-size: 14px;
  color: #16243E;
}
.bx-formula i { font-style: normal; font-size: 20px; color: var(--or-texte) }
.bx-formula .bx-formula-r { background: #16243E; color: #fff }
.bx-formula .bx-formula-eq { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0 }
.bx-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bx-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 10px 8px;
  background: #fff;
  border: 1px solid #E6DEC9;
  border-radius: 160px 160px 6px 6px;
  text-align: center;
}
.bx-tier h3 {
  font-family: var(--lmm-font);
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #16243E;
  margin: 0 0 8px;
}
.bx-tier p { font-size: 13.5px; line-height: 1.5; color: #5A6376; margin: 0 0 14px }
.bx-tier .bx-tier-px {
  margin: auto 0 4px;
  padding-top: 14px;
  border-top: 1px solid #EDE5D3;
  align-self: stretch;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or-texte);
}
.bx-tier a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 13px;
  color: #16243E;
  border-bottom: 1px solid #C2A15F;
}
.bx-tier a:hover { color: var(--or-texte) }

.bx-slots { background: #16243E; color: #F9F5EC; padding: 52px clamp(20px, 4vw, 56px) }
.bx-slots-head { margin-bottom: 30px }
.bx-slots-t {
  font-family: var(--lmm-font);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #F9F5EC;
  margin: 0 0 12px;
  max-width: 18em;
  text-wrap: balance;
}
.bx-slots-head p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #C3CBDB; max-width: 34em }
.bx-slots-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) }
.bx-slot { padding: 24px 0; border-top: 1px solid rgba(231, 211, 168, .22) }
.bx-slot h3 { margin: 0 0 6px; font-size: 20px; font-weight: 500; color: #fff }
.bx-slot p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #C3CBDB; max-width: 26em }
/* Course du soleil sur une demi-arche : matin, journee, soir. */
.bx-sun {
  display: block;
  position: relative;
  width: 72px;
  height: 36px;
  margin-bottom: 18px;
  border: 1px solid rgba(194, 161, 95, .7);
  border-bottom: 0;
  border-radius: 72px 72px 0 0;
  box-sizing: border-box;
}
.bx-sun::before {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: 0;
  height: 1px;
  background: rgba(194, 161, 95, .45);
}
.bx-sun::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #C2A15F;
  left: -3px;
  bottom: 5px;
}
.bx-slot--2 .bx-sun::after { left: 29px; bottom: auto; top: -7px }
.bx-slot--3 .bx-sun::after { left: auto; right: -3px; background: #16243E; border: 1px solid #E7D3A8; box-sizing: border-box }

@media (min-width: 600px) {
  .bx-tiers { gap: 16px }
  .bx-tier { padding: 50px 24px 18px }
  .bx-tier p, .bx-tier a { font-size: 14.5px }
  .bx-checks { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 760px) {
  .bx-slots-list { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .bx-slot { padding: 6px 28px 0; border-top: 0; border-left: 1px solid rgba(231, 211, 168, .22) }
  .bx-slot:first-child { padding-left: 0; border-left: 0 }
}
@media (min-width: 960px) {
  .bx-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: center }
  .bx-arches { height: clamp(440px, 38vw, 540px) }
  .bx-types-in { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: center }
  .bx-pills { margin: 0 }
  .bx-slots { padding-top: 76px; padding-bottom: 80px }
  .bx-slots-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: 48px }
  .bx-slots-t { margin: 0 }
}
@media (min-width: 1100px) {
  .bx-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

/* ---- Particuliers : grande arche a gauche, entreprise ou annonce, pieces en plan, logements ---- */
.pt-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px }
.pt-arch {
  box-sizing: border-box;
  height: clamp(250px, 66vw, 420px);
  padding: clamp(6px, .7vw, 9px);
  border: 1px solid #C2A15F;
  border-radius: 420px 420px 6px 6px;
}
.pt-arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 420px 420px 3px 3px;
}
.pt-hero .svc-tag-note { flex-basis: 100% }

.pt-table, .pt-table thead, .pt-table tbody { display: block; width: 100% }
.pt-table { border-collapse: collapse }
.pt-table tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
  padding: 0 0 8px;
}
.pt-table thead td { display: none }
.pt-table th, .pt-table td { display: block; text-align: left; box-sizing: border-box }
.pt-table thead th {
  padding: 14px 14px 12px;
  border-radius: 6px 6px 0 0;
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #16243E;
  border: 1px solid #E6DEC9;
  border-bottom: 0;
}
.pt-table tbody th {
  grid-column: 1 / -1;
  padding: 14px 0 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or-texte);
}
.pt-table td {
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #5A6376;
  background: #fff;
  border: 1px solid #E6DEC9;
}
.pt-table .pt-us { background: #16243E; border-color: #16243E; color: #F9F5EC }
.pt-table thead th.pt-us { color: #E7D3A8 }

.pt-freq-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px }
.pt-freq-card {
  padding: 28px 26px 30px;
  background: #fff;
  border: 1px solid #E6DEC9;
  border-radius: 8px;
}
.pt-freq-card:last-child { background: #16243E; border-color: #16243E }
.pt-freq-tag {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or-texte);
}
.pt-freq-card h3 {
  font-family: var(--lmm-font);
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #16243E;
  margin: 0 0 10px;
}
.pt-freq-card p { margin: 0; font-size: 15px; line-height: 1.65; color: #5A6376; max-width: 30em }
.pt-freq-card:last-child .pt-freq-tag { color: #C2A15F }
.pt-freq-card:last-child h3 { color: #fff }
.pt-freq-card:last-child p { color: #C3CBDB }

/* Pieces : un plan de logement, cloisons en filet. */
.pt-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: #CDBF9F;
  border: 1px solid #CDBF9F;
  border-radius: 6px;
  overflow: hidden;
}
.pt-room { position: relative; padding: 24px 22px 22px; background: #FBF8F1 }
.pt-room-n {
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--or-texte);
}
.pt-room h3 {
  font-family: var(--lmm-font);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #16243E;
  margin: 0 0 10px;
}
.pt-room ul { list-style: none; margin: 0; padding: 0 }
.pt-room li {
  position: relative;
  padding: 5px 0 5px 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #5A6376;
}
.pt-room li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 13px;
  width: 5px;
  height: 5px;
  background: #C2A15F;
  transform: rotate(45deg);
}

.pt-homes-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center }
.pt-homes-tx .svc-lede { margin-top: 14px }
.pt-homes-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px }
.pt-homes-list li { padding: 16px 0; border-top: 1px solid #D8CFBA }
.pt-homes-list h3 { margin: 0 0 4px; font-size: 18px; font-weight: 500; color: #16243E }
.pt-homes-list p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5A6376 }
.pt-homes-ph .arch { height: clamp(340px, 100vw, 460px); max-width: 340px; margin: 0 auto; box-sizing: border-box }

@media (min-width: 600px) {
  .pt-homes-list { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 760px) {
  .pt-freq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
  .pt-freq-card { padding: 36px 34px 38px }
  .pt-plan { grid-template-columns: repeat(12, minmax(0, 1fr)) }
  .pt-room { grid-column: span 7; padding: 30px 30px 28px }
  .pt-room:nth-child(2), .pt-room:nth-child(3) { grid-column: span 5 }
  .pt-table tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr); column-gap: 0; padding: 0 }
  .pt-table thead td { display: block }
  .pt-table thead th { border: 0; background: none; padding: 18px 22px 16px; font-size: 15px }
  .pt-table thead th.pt-us { background: #16243E; border-radius: 8px 8px 0 0 }
  .pt-table tbody th {
    grid-column: auto;
    padding: 18px 16px 18px 0;
    border-top: 1px solid #E6DEC9;
    font-size: 11.5px;
  }
  .pt-table td { padding: 18px 22px; border: 0; border-top: 1px solid #E6DEC9; background: none; font-size: 15px }
  .pt-table td.pt-us { border-top-color: rgba(231, 211, 168, .2) }
  .pt-table tbody tr:last-child .pt-us { border-radius: 0 0 8px 8px }
}
@media (min-width: 960px) {
  .pt-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 84px); align-items: center }
  .pt-arch { height: clamp(460px, 40vw, 580px) }
  .pt-homes-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px) }
  .pt-homes-ph .arch { height: clamp(460px, 38vw, 540px); max-width: 380px; margin: 0 0 0 auto }
}

/* ---- Nounous : arche etroite, bandeau navy de l entreprise, besoins, encadre des questions ---- */
.nn-hero { overflow: hidden }
.nn-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center }
.nn-hero-ph { position: relative; display: flex; justify-content: center }
/* disque sauge derriere l arche : douceur, sans personne en photo */
.nn-hero-ph::before {
  content: '';
  position: absolute;
  width: min(78%, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #E4E7DC;
  left: 6%;
  bottom: -8%;
}
.nn-arch {
  position: relative;
  box-sizing: border-box;
  width: min(62%, 260px);
  height: clamp(280px, 82vw, 360px);
  padding: 7px;
  border: 1px solid #C2A15F;
  border-radius: 200px 200px 6px 6px;
  background: #FBF8F1;
}
.nn-arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 200px 200px 3px 3px;
}

.nn-team { background: #16243E; color: #F9F5EC; padding: 56px clamp(20px, 4vw, 56px) }
.nn-team-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px }
.nn-team-t {
  font-family: var(--lmm-font);
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -.025em;
  color: #F9F5EC;
  margin: 0 0 16px;
  text-wrap: balance;
}
.nn-team-head p { margin: 0; font-size: 16px; line-height: 1.65; color: #C3CBDB; max-width: 30em }
.nn-team-list { list-style: none; margin: 0; padding: 0; counter-reset: nn }
.nn-team-list li {
  position: relative;
  padding: 20px 0 20px 54px;
  border-top: 1px solid rgba(231, 211, 168, .22);
  counter-increment: nn;
}
.nn-team-list li::before {
  content: '0' counter(nn);
  position: absolute;
  left: 0;
  top: 23px;
  font-size: 13px;
  letter-spacing: .08em;
  color: #C2A15F;
}
.nn-team-list h3 { margin: 0 0 6px; font-size: 19px; font-weight: 500; color: #fff }
.nn-team-list p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #C3CBDB }

.nn-needs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px }
.nn-need {
  padding: 26px 24px 26px;
  background: #fff;
  border: 1px solid #E6DEC9;
  border-top: 3px solid #879276;
  border-radius: 6px;
}
.nn-need h3 { margin: 0 0 8px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: #16243E }
.nn-need p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5A6376 }

.nn-home-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center }
.nn-home-tx .svc-lede { margin-top: 14px }
.nn-home-ph .arch { height: clamp(320px, 90vw, 420px); max-width: 300px; margin: 0 auto; box-sizing: border-box }

.nn-ask-sec { border-top: 0 }
.nn-ask {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 34px 22px 26px;
  background: #fff;
  border: 1px solid #C2A15F;
  border-radius: 8px;
}
.nn-ask::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(194, 161, 95, .35);
  border-radius: 5px;
  pointer-events: none;
}
.nn-ask-tx { margin: 14px 0 18px; font-size: 15.5px; line-height: 1.65; color: #5A6376; max-width: 38em }
.nn-ask-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px }
.nn-ask-list li {
  position: relative;
  padding: 14px 0 14px 42px;
  border-bottom: 1px solid #EDE4D2;
  font-size: 16px;
  line-height: 1.45;
  color: #16243E;
}
.nn-ask-list li::before {
  content: '?';
  position: absolute;
  left: 0;
  top: 11px;
  width: 28px;
  height: 28px;
  border: 1px solid #C2A15F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-style: italic;
  color: var(--or-texte);
  box-sizing: border-box;
}
.nn-ask .svc-more { position: relative }

@media (min-width: 760px) {
  .nn-needs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
  .nn-ask { padding: 52px clamp(32px, 5vw, 64px) 40px }
  .nn-ask-list { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 860px) {
  .nn-hero-in { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px) }
  .nn-hero-ph { justify-content: flex-end }
  .nn-hero-ph::before { left: auto; right: 22%; width: 82%; bottom: -10% }
  .nn-arch { width: 100%; max-width: 300px; height: clamp(400px, 38vw, 500px) }
  .nn-home-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(40px, 6vw, 96px) }
  .nn-home-ph .arch { height: clamp(420px, 36vw, 500px); max-width: 360px; margin: 0 }
}
@media (min-width: 960px) {
  .nn-team { padding-top: 80px; padding-bottom: 84px }
  .nn-team-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center }
}

@media (prefers-reduced-motion: reduce) {
  .svc-faq summary::after, .svc-btn { transition: none }
}

/* ---------- En-tete : quatre services (Task 6) ----------
   Le menu porte les quatre pages de service. Au centre, le logo laisse
   trop peu de place aux cotes sous 1200px : de 760 a 1199px l en-tete
   passe sur deux rangs (logo a gauche et actions a droite, puis les
   quatre services sur toute la largeur, sous un filet). Des 1200px, les
   trois blocs reviennent, logo au centre. Sous 760px : burger inchange. */
.hdr-nav a { color: #5A6376; transition: color .2s ease }
.hdr-nav a:hover { color: #16243E }
.hdr-nav a[aria-current="page"] {
  color: #16243E;
  font-weight: 500;
  box-shadow: inset 2px 0 0 #C2A15F;
  padding-left: 14px;
}

@media (min-width: 760px) {
  .hdr { flex-wrap: wrap; row-gap: 0; padding-bottom: 0 }

  .brand { order: 0; flex: 1 1 auto; justify-content: flex-start; text-align: left }

  .hdr-actions { order: 1; flex: 0 0 auto }

  .hdr-nav {
    order: 2;
    flex: 1 0 100%;
    justify-content: center;
    gap: clamp(28px, 4vw, 44px);
    margin-top: 16px;
    border-top: 1px solid #EDE4D2;
    font-size: 14px;
  }

  /* 44px de haut : la cible tactile tient dans le rang, sans ::after. */
  .hdr-nav a,
  .hdr-nav a[aria-current="page"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    box-shadow: none;
    border-bottom: 1px solid transparent;
  }

  .hdr-nav a[aria-current="page"] { border-bottom-color: #C2A15F }
}

@media (min-width: 1200px) {
  .hdr { flex-wrap: nowrap; padding-bottom: 20px }

  .hdr-nav {
    order: 0;
    flex: 1 1 0;
    justify-content: flex-start;
    gap: 26px;
    margin-top: 0;
    border-top: 0;
    font-size: 13.5px;
  }

  .hdr-nav a,
  .hdr-nav a[aria-current="page"] { min-height: 0 }

  .brand { order: 1; flex: 0 0 auto; justify-content: center; text-align: center }

  .hdr-actions { order: 2; flex: 1 1 0 }
}

/* ---------- Pied de page : liens ---------- */
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
  flex: 1 1 100%;
}

.foot-nav a {
  color: #8FA0BE;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.foot-nav a:hover { color: #E7D3A8 }

@media (min-width: 760px) {
  .foot-nav { flex: 0 1 auto }
}

/* ---------- Accueil, direction « A · Arches » (avenant du 2026-11-04) ----------
   Hero : titre a gauche, galerie de trois arches photo a droite (en dessous
   sous 960px, toujours trois arches cote a cote, jamais de defilement
   horizontal). Bande de reperes, quatre cartes avec photo en arche, bandeau
   navy des produits, puis ce qui ne change pas et l offre. */
.home-hero { padding: 28px clamp(20px, 4vw, 56px) 32px }

.home-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.home-hero .hero-slogan { font-size: clamp(15px, 1.6vw, 18px); margin: 0 0 12px }

.home-h1 {
  font-family: var(--lmm-font);
  font-size: clamp(36px, 5.1vw, 66px);
  line-height: 1.03;
  font-weight: 500;
  letter-spacing: -.025em;
  color: #16243E;
  margin: 0 0 18px;
  max-width: 12em;
  text-wrap: balance;
}

.home-h1 em { font-weight: 400; color: var(--or-texte) }

.home-sub {
  font-size: 16.5px;
  line-height: 1.62;
  color: #5A6376;
  max-width: 31em;
  margin: 0;
  text-wrap: pretty;
}

.home-hero-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: 24px;
}

/* Trois arches de hauteurs decalees, alignees en pied. */
.home-arches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  align-items: end;
  height: clamp(220px, 62vw, 380px);
}

.home-arch {
  box-sizing: border-box;
  min-width: 0;
  height: 82%;
  padding: clamp(4px, .5vw, 6px);
  border: 1px solid #C2A15F;
  border-radius: 200px 200px 6px 6px;
  background: #fff;
}

.home-arch:nth-child(2) { height: 100% }
.home-arch:nth-child(3) { height: 70% }

.home-arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 200px 200px 3px 3px;
}

@media (min-width: 960px) {
  .home-hero { padding: 48px clamp(20px, 4vw, 56px) 52px }
  .home-hero-in {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  .home-arches { height: clamp(380px, 34vw, 500px) }
}

/* Bande de reperes : lignes sous 760px, trois colonnes au-dela. */
.home-marks { padding: 0 clamp(20px, 4vw, 56px) }

.home-marks-in {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid #E6DEC9;
}

.home-marks-in li {
  display: grid;
  grid-template-columns: 8.4em minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid #E6DEC9;
}

.home-marks-in li:last-child { border-bottom: 0 }

.home-marks-in b {
  font-size: 18px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #16243E;
}

.home-marks-in span {
  font-size: 14px;
  line-height: 1.45;
  color: #5A6376;
}

@media (min-width: 760px) {
  .home-marks-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .home-marks-in li {
    display: block;
    padding: 24px clamp(16px, 2vw, 28px);
    border-bottom: 0;
    border-right: 1px solid #E6DEC9;
  }
  .home-marks-in li:first-child { padding-left: 0 }
  .home-marks-in li:last-child { border-right: 0 }
  .home-marks-in b { display: block; font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 4px }
}

/* Cartes de service : photo en arche, public, nom (le lien couvre la carte), phrase, prix. */
.home-index { background: #F3ECDD; padding: 44px clamp(20px, 4vw, 56px) 52px }

.home-index .svc-eyebrow { margin-bottom: 8px }

.home-index-t {
  font-family: var(--lmm-font);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #16243E;
  margin: 0 0 24px;
}

.home-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.home-card {
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 0 16px;
  padding: 10px;
  background: #fff;
  border: 1px solid #EBE2CF;
  border-radius: 8px;
  transition: box-shadow .3s ease, transform .3s ease;
}

.home-card-ph {
  height: 136px;
  overflow: hidden;
  border-radius: 60px 60px 4px 4px;
}

.home-card-ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-card-bd {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 4px 4px 0 0;
}

.home-card-who {
  font-size: 12.5px;
  font-style: italic;
  color: var(--or-texte);
  margin: 0;
}

.home-card-name {
  font-family: var(--lmm-font);
  font-size: 18.5px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

.home-card-name a { color: #16243E; text-decoration: none }

/* le lien du nom couvre toute la carte : une seule ancre, le nom du service */
.home-card-name a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
}

.home-card-line {
  font-size: 14px;
  line-height: 1.5;
  color: #5A6376;
  margin: 0;
}

.home-card-px {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 8px;
  border-top: 1px solid #EDE5D3;
  font-size: 14px;
  font-weight: 500;
  color: #16243E;
}

.home-card-go {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid #C2A15F;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--or-texte);
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.home-card:hover { box-shadow: 0 12px 30px rgba(22, 36, 62, .09); transform: translateY(-2px) }
.home-card:hover .home-card-name a { color: #16243E }
.home-card:hover .home-card-go { background: #C2A15F; color: #16243E; transform: translateX(3px) }
.home-card-name a:focus-visible { outline: 2px solid #C2A15F; outline-offset: 2px }

@supports selector(:has(a)) {
  .home-card-name a:focus-visible { outline: none }
  .home-card:has(a:focus-visible) { outline: 2px solid #C2A15F; outline-offset: 2px }
}

@media (min-width: 600px) {
  .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
  .home-card { grid-template-columns: minmax(0, 1fr); padding: 12px }
  .home-card-ph { height: clamp(190px, 26vw, 230px); border-radius: 140px 140px 4px 4px }
  .home-card-bd { gap: 6px; padding: 16px 6px 6px }
  .home-card-name { font-size: 21px }
  .home-card-px { padding-top: 12px }
}

@media (min-width: 1100px) {
  .home-cards { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .home-card-ph { height: clamp(200px, 16vw, 240px) }
}

@media (min-width: 960px) {
  .home-index { padding-top: 56px; padding-bottom: 64px }
  .home-index-t { margin-bottom: 30px }
}

/* Bandeau navy des produits : texte a gauche, photo a droite (dessous sous 760px). */
.home-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #16243E;
  color: #F9F5EC;
}

.home-band-tx { padding: 40px clamp(20px, 4vw, 56px) 36px }

.home-band .svc-eyebrow { color: #C2A15F; margin-bottom: 12px }

.home-band-t {
  font-family: var(--lmm-font);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #F9F5EC;
  margin: 0;
  max-width: 16em;
  text-wrap: balance;
}

.home-band-t em { font-weight: 400; color: #E7D3A8 }

.home-band-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.home-band-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: #D9DEE8;
}

.home-band-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C2A15F;
}

.home-band-ph img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 670;
  object-fit: cover;
}

@media (min-width: 760px) {
  .home-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch }
  .home-band-tx {
    align-self: center;
    padding: 56px clamp(32px, 4vw, 64px) 56px max(clamp(20px, 4vw, 56px), calc(50vw - 680px));
  }
  .home-band-ph img { height: 100%; min-height: clamp(320px, 30vw, 400px); aspect-ratio: auto }
}

/* Ce qui ne change pas : deux points, sur l ivoire apres le navy. */
.home-common { padding: 44px clamp(20px, 4vw, 56px) 36px }

.home-common-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #D8CFBA;
}

.home-common-list li {
  padding: 20px 0;
  border-bottom: 1px solid #D8CFBA;
}

.home-common-list h3 {
  font-family: var(--lmm-font);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #16243E;
  margin: 0 0 8px;
}

.home-common-list p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #5A6376;
  margin: 0;
  max-width: 36em;
}

.home-wa {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 .35em; /* inline-flex rogne l espace avant le numero */
  min-height: 44px;
  margin-top: 6px;
  font-size: 15px;
  color: #16243E;
  text-decoration: none;
  border-bottom: 1px solid #C2A15F;
}

.home-wa:hover { color: var(--or-texte) }

@media (min-width: 860px) {
  .home-common-list li {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 32px;
    align-items: baseline;
  }

  .home-common-list h3 { margin: 0 }

  .home-wa { grid-column: 2 }
}

@media (min-width: 960px) {
  .home-common { padding-top: 64px; padding-bottom: 40px }
  .home-common .svc-h2 { position: static }
}

.home-offer { padding: 12px clamp(20px, 4vw, 56px) 56px }
.home-offer .offre-title { margin-bottom: 8px }

.home-offer-for {
  font-size: 15px;
  line-height: 1.6;
  color: #5A6376;
  margin: 0 0 6px;
}

@media (prefers-reduced-motion: reduce) {
  .hdr-nav a, .home-card, .home-card-go { transition: none }
  .home-card:hover, .home-card:hover .home-card-go { transform: none }
}

/* ---------- Telephone : barre d'action fixe (avenant mobile du 2026-11-06) ----------
   Base = telephone : trois actions a portee de pouce remplacent la pastille
   WhatsApp, qui recouvrait le texte de droite sur toutes les pages. Le pied
   de page recoit une marge basse equivalente pour ne rien masquer.
   A partir de 760px, la barre disparait et la pastille revient. */
.wa-float { display: none }

.mbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 8px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(249, 245, 236, .96);
  border-top: 1px solid #E7D3A8;
  box-shadow: 0 -6px 20px rgba(22, 36, 62, .08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.mbar-a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid #D9C49A;
  color: #16243E;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
}

.mbar-a svg { width: 18px; height: 18px; flex: none }
.mbar-a:nth-child(2) svg { color: #5E7350 }

.mbar-cta {
  background: #C2A15F;
  border-color: #C2A15F;
  font-weight: 600;
}

/* Le dernier ecran du site reste lisible au-dessus de la barre
   (le pied de page porte son padding en style en ligne, d'ou !important). */
body:has(.mbar) footer { padding-bottom: calc(34px + 64px + env(safe-area-inset-bottom)) !important }

@media (min-width: 760px) {
  .wa-float { display: flex }
  .mbar { display: none }
  body:has(.mbar) footer { padding-bottom: 34px !important }
}

/* ---------- Pied de page : les deux numeros, cliquables ---------- */
.foot-tel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
  flex: 1 1 100%;
}

.foot-tel-k { width: 100%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #C2A15F }
.foot-tel a { color: #C3CBDB; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap }
.foot-tel a:hover { color: #E7D3A8 }

@media (min-width: 760px) {
  .foot-tel { flex: 0 1 auto; column-gap: 14px }
  .foot-tel-k { width: auto }
}

/* ---------- Contact : coordonnees en lignes a toucher ---------- */
.cd { padding: 26px clamp(20px, 4vw, 56px) 64px; font-size: 15px; color: #5A6376 }

.cd-list { display: flex; flex-direction: column; max-width: 520px }

.cd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid #E7D3A8;
}

.cd-row:last-child { border-bottom: 1px solid #E7D3A8 }
.cd-k { font-size: 13px; flex: none }
.cd-v { display: flex; flex-direction: column; align-items: flex-end; text-align: right }
.cd-v a { color: #16243E; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap }
.cd-v b { font-weight: 500; color: #16243E }

@media (min-width: 760px) {
  .cd { font-size: 13px }
  .cd-list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 44px; max-width: none }
  .cd-row, .cd-row:last-child { border: 0; padding: 0; justify-content: center; gap: 8px }
  .cd-k::after { content: " ·" }
  .cd-v { flex-direction: row; gap: 8px }
  .cd-v a { min-height: 0; font-weight: 400; border-bottom: 1px solid #C2A15F; padding-bottom: 1px }
}

/* ---------- Encart offre : medaillon resserre sur telephone ---------- */
.offre-short { padding: 24px 20px }
.offre-badge { width: 84px; height: 84px; font-size: 13px }

@media (min-width: 760px) {
  .offre-short { padding: 40px 50px }
  .offre-badge { width: 130px; height: 130px; font-size: 15px }
}