/* ============================================================= Mission Popote — refonte MOBILE de la page d'accueil Maquette « Home mobile · septembre 2026 » ------------------------------------------------------------- Chargé UNIQUEMENT par index.html, et APRÈS style.css. Deux garde-fous, à tenir : 1. tout est préfixé par `.home-v2` (classe posée sur de la seule page d'accueil) — aucune autre page ne peut être touchée ; 2. tout est enfermé dans @media (max-width: 768px), sauf le tout petit bloc de tête qui masque les éléments mobiles partout ailleurs. Le desktop ne voit donc rien de ce fichier. Le `!important` est ici la règle et non l'exception : style.css fait 20 000 lignes et pose déjà des `!important` sur ces sélecteurs. Sans lui, la moitié de ce fichier serait silencieusement ignorée. ============================================================= */ /* --- Éléments qui n'existent QUE sur le mobile de la home ------- */ .mh-only { display: none !important; } /* Le titre de la zone d'intervention reçoit un pour l'italique terracotta de la maquette MOBILE. Cette règle-ci vit HORS du media query, donc elle s'applique au desktop et l'y annule : le desktop garde le titre d'un seul tenant, comme aujourd'hui. */ .home-v2 .zone h2 .text-accent { font-style: normal; color: inherit; } @media (max-width: 768px) { /* ============================================================= 0. Fond de page et règles communes ============================================================= */ .home-v2 { background: #FDF7E4; } /* La maquette aligne tout à gauche : un texte centré sur une colonne étroite oblige l'œil à rechercher le début de chaque ligne. */ .home-v2 .section-header, .home-v2 .section-header h2, .home-v2 .section-header .section-tag, .home-v2 .section-subtitle { text-align: left !important; } .home-v2 .section-tag { display: block !important; font-family: var(--font-body) !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #7C8A78 !important; margin: 0 0 10px !important; background: none !important; padding: 0 !important; border: 0 !important; } .home-v2 section .container { padding-left: 20px !important; padding-right: 20px !important; } .home-v2 h2 { font-family: var(--font-display) !important; font-size: 1.9rem !important; line-height: 1.12 !important; color: var(--forest) !important; margin: 0 0 10px !important; letter-spacing: -0.01em; } .home-v2 h2 .text-accent { font-style: italic; color: var(--terracotta) !important; } /* ============================================================= 1. Barre de navigation — le bouton « Réserver » revient ============================================================= */ .home-v2 .nav-actions { display: flex !important; align-items: center; gap: 10px; margin-left: auto; } /* « Mon compte » reste dans le tiroir : deux boutons plus le menu, sur 375 px, ne laissent plus de place au logo. */ .home-v2 #navAuthBtn { display: none !important; } .home-v2 #navReserveBtn { background: var(--cream) !important; color: var(--forest) !important; border: 0 !important; border-radius: var(--radius-full) !important; padding: 12px 22px !important; font-size: 0.95rem !important; font-weight: 700 !important; box-shadow: none !important; min-height: 44px; display: inline-flex; align-items: center; } .home-v2 .hamburger { margin-left: 4px; } /* ============================================================= 2. Accroche ============================================================= */ /* 92 px en haut = les 64 px de la barre de navigation (en position fixed) plus l'espace de la maquette. Sans ça, le sur-titre passe DERRIÈRE la barre et disparaît. */ .home-v2 .hero { background: var(--bg-dark) !important; padding: 92px 0 40px !important; text-align: left !important; } .home-v2 .hero .hero-container, .home-v2 .hero-bento, .home-v2 .bento-main { text-align: left !important; display: block !important; } /* Une seule gouttière, et la même que les autres sections. .hero-container (24 px) et .bento-main (28 px) s'additionnaient : il ne restait que 271 px de large sur 375, ce qui cassait l'accroche en deux lignes de plus que la maquette. */ .home-v2 .hero .hero-container { padding-left: 20px !important; padding-right: 20px !important; } .home-v2 .bento-main { padding: 0 !important; } .home-v2 .hero-badge { display: block !important; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 12px !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; color: #93A48F !important; line-height: 1.45; } .home-v2 .mh-badge-tail { display: inline !important; } /* 2,2rem et pas davantage : au-delà, « La cuisine maison, » se casse en deux sur un iPhone SE et l'accroche perd sa ligne de force. */ .home-v2 .hero h1 { font-size: 2.2rem !important; line-height: 1.04 !important; color: var(--cream) !important; margin: 0 0 16px !important; letter-spacing: -0.02em; } .home-v2 .hero h1 .text-accent { display: block; font-style: italic; color: var(--terracotta-light) !important; } .home-v2 .hero-subtitle { font-size: 1.05rem !important; line-height: 1.55 !important; color: rgba(255, 249, 229, 0.8) !important; margin: 0 0 26px !important; max-width: none !important; } .home-v2 .hero-subtitle strong { color: var(--cream) !important; font-weight: 600; } /* Le prix, en gros, avant le bouton */ .home-v2 .mh-hero-price { display: flex !important; align-items: baseline; gap: 12px; margin: 0 0 22px !important; } .home-v2 .mh-hero-price-value { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--cream); line-height: 1; flex-shrink: 0; } .home-v2 .mh-hero-price-note { font-size: 0.92rem; line-height: 1.35; color: rgba(255, 249, 229, 0.72); } .home-v2 .hero-buttons { display: block !important; margin: 0 0 14px !important; } .home-v2 .hero-buttons .btn-hero { display: block !important; width: 100% !important; text-align: center; background: var(--cream) !important; color: var(--forest) !important; border: 0 !important; border-radius: var(--radius-full) !important; padding: 19px 24px !important; font-size: 1.12rem !important; font-weight: 700 !important; box-shadow: none !important; } /* Note Google */ .home-v2 .mh-rating { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 16px; margin: 0 0 16px; border: 1px solid rgba(255, 249, 229, 0.18); border-radius: var(--radius-full); color: var(--cream); font-size: 0.98rem; font-weight: 600; text-decoration: none; } .home-v2 .mh-rating[hidden] { display: none !important; } .home-v2 .mh-rating .mh-star { font-size: 1.05rem; } .home-v2 .mh-rating-arrow { color: var(--gold); } .home-v2 .mh-hero-loc { display: flex !important; align-items: center; justify-content: center; gap: 8px; margin: 0 0 26px !important; font-size: 0.95rem; font-weight: 600; color: rgba(255, 249, 229, 0.72); } .home-v2 .mh-hero-loc svg { color: var(--gold); flex-shrink: 0; } /* L'ancienne ligne « Paris & petite couronne · À partir de 70€* » : le prix est désormais au-dessus du bouton, et la zone juste ici. */ .home-v2 .hero-location-text { display: none !important; } /* Deux photos de sessions */ .home-v2 .mh-hero-shots { display: block !important; margin: 0 0 28px !important; } .home-v2 .mh-hero-shots-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* `height: auto` est indispensable : les attributs width/height du comptent comme une déclaration CSS, et une hauteur explicite désactive purement et simplement `aspect-ratio`. Sans cette ligne, les deux photos s'affichent à leur hauteur naturelle — 1 000 px de haut. */ .home-v2 .mh-hero-shots img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; display: block; } .home-v2 .mh-hero-shots figcaption { margin-top: 10px; font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: rgba(255, 249, 229, 0.5); } /* Les 4 chiffres */ .home-v2 .hero-stats { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; padding: 20px 8px !important; margin: 0 0 18px !important; border: 1px solid rgba(255, 249, 229, 0.14) !important; border-radius: 18px !important; background: rgba(255, 249, 229, 0.03) !important; } .home-v2 .hero-stat { text-align: center; padding: 0 4px; border-right: 1px solid rgba(255, 249, 229, 0.14); } .home-v2 .hero-stat:last-child { border-right: 0; } .home-v2 .hero-stat-value { display: block; font-family: var(--font-display) !important; font-size: 1.35rem !important; font-weight: 700 !important; color: var(--cream) !important; line-height: 1.1; margin-bottom: 6px; } .home-v2 .hero-stat-label { display: block; font-size: 0.66rem !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255, 249, 229, 0.55) !important; line-height: 1.25; } /* Les 3 promesses */ /* Les trois promesses sortent de leur cadre : dans la maquette ce sont trois cartes pleine largeur, pas un encart dans un encart. */ .home-v2 .hero-right, .home-v2 .hero-right-inner, .home-v2 .hero-right-content { display: block !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; /* .hero-right-content porte un min-height de 440 px pour le fond incliné du desktop : sans ça, 150 px de vert vide sous la troisième promesse. */ min-height: 0 !important; } .home-v2 .hero-right-bg, .home-v2 .sticker-price { display: none !important; } .home-v2 .hero-feature { display: flex !important; align-items: flex-start; gap: 14px; padding: 18px 18px !important; margin: 0 0 10px !important; border: 1px solid rgba(255, 249, 229, 0.14) !important; border-radius: 18px !important; background: rgba(255, 249, 229, 0.03) !important; text-align: left !important; } .home-v2 .hero-feature-emoji { display: none !important; } .home-v2 .mh-feat-ico { display: block !important; width: 26px; height: 26px; flex-shrink: 0; color: var(--gold); margin-top: 2px; } .home-v2 .hero-feature h3 { font-family: var(--font-body) !important; font-size: 1.06rem !important; font-weight: 700 !important; color: var(--cream) !important; margin: 0 0 4px !important; } .home-v2 .hero-feature p { font-size: 0.95rem !important; line-height: 1.4 !important; color: rgba(255, 249, 229, 0.68) !important; margin: 0 !important; } /* ============================================================= 3. Comment ça marche — la liste numérotée ============================================================= */ /* La section crème monte sur le vert et l'arrondit : c'est ce qui marque la fin de l'accroche sans ajouter de séparateur. */ .home-v2 .how-it-works { background: #FDF7E4 !important; border-radius: 28px 28px 0 0 !important; padding: 40px 0 36px !important; position: relative; z-index: 1; } /* style.css passait CE titre en crème `!important` pour le mobile, du temps où la section était sur fond vert. Elle est crème désormais : sans cette ligne, « Comment » est écrit en crème sur crème — invisible, et seul « ça marche » restait lisible. Sélecteur volontairement plus précis que l'original, sinon le sien l'emporte. */ .home-v2 .how-it-works-timeline .section-header h2 { color: var(--forest) !important; } .home-v2 .how-it-works-timeline { color: var(--forest) !important; } .home-v2 .steps-carousel { display: none !important; } .home-v2 .mh-steps { display: block !important; list-style: none; margin: 24px 0 0; padding: 0; } .home-v2 .mh-step { display: flex; gap: 16px; padding-bottom: 26px; } .home-v2 .mh-step-last { padding-bottom: 0; } .home-v2 .mh-step-num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--forest); color: var(--cream); font-family: var(--font-display); /* 19,2 px en gras : au-dessus du seuil « grand texte » (18,66 px), où le contraste demandé tombe à 3:1. Le chiffre blanc sur le cercle terracotta de la 4e étape est à 4,3:1 — juste sous les 4,5:1 du petit texte, largement au-dessus une fois lu comme grand texte. Et il se lit mieux, ce qui était le but premier. */ font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* La dernière étape en terracotta : c'est l'aboutissement, pas une étape de plus — la maquette le dit par la couleur. */ /* Terracotta foncé et non --terracotta : le chiffre est en blanc, et --terracotta ne donne que 3,2:1 sous la taille du « grand texte ». */ .home-v2 .mh-step-last .mh-step-num { background: #A9654A; } /* 0,75 rem = le plancher du projet (12 px), et #55614F au lieu de #8A9686 : l'ancien couple faisait 10,9 px à 2,9:1 sur le crème, très en dessous de 4,5:1. C'est la couleur déjà utilisée pour le texte courant ici. */ .home-v2 .mh-step-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #55614F; margin-bottom: 4px; } .home-v2 .mh-step-body h3 { font-family: var(--font-body); font-size: 1.08rem; font-weight: 700; color: var(--forest); margin: 0 0 6px; line-height: 1.25; } .home-v2 .mh-step-body p { font-size: 0.98rem; line-height: 1.5; color: #55614F; margin: 0; } /* ============================================================= 4. Notre concept — une carte, sans photos ============================================================= */ /* Les photos sont remontées dans l'accroche : ici elles arrivaient après la décision, pas avant. */ .home-v2 .concept-photo-carousel, .home-v2 .photo-strip { display: none !important; } .home-v2 .concept { background: #FDF7E4 !important; padding: 4px 0 36px !important; } .home-v2 .concept .container > .section-header, .home-v2 .concept .concept-refined-grid { background: transparent; } .home-v2 .concept .container { background: #EFEADA; border-radius: 20px; padding: 26px 20px !important; } .home-v2 .concept .section-subtitle { font-size: 1rem !important; color: #55614F !important; margin: 0 0 20px !important; } .home-v2 .concept-refined-grid { display: block !important; gap: 0 !important; } .home-v2 .concept-refined-card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 18px !important; } .home-v2 .concept-refined-card:last-child { margin-bottom: 0 !important; } .home-v2 .concept-refined-card h3 { font-family: var(--font-body) !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--forest) !important; margin: 0 0 4px !important; } .home-v2 .concept-refined-card p { font-size: 0.98rem !important; line-height: 1.5 !important; color: #55614F !important; margin: 0 !important; } /* ============================================================= 5. Nos formules ============================================================= */ .home-v2 .pricing { background: #FDF7E4 !important; padding: 12px 0 36px !important; } /* L'encart « offre découverte » passe SOUS le bouton (maquette) : il récompense un choix déjà fait, il ne doit pas le précéder. */ .home-v2 .pricing .container { display: flex !important; flex-direction: column !important; } .home-v2 .pricing .section-header { order: 1; } .home-v2 .pricing .pricing-grid { order: 2; } .home-v2 .pricing .mh-plan-cta { order: 3; } .home-v2 .pricing .promo-banner { order: 4; } .home-v2 .pricing .pricing-disclaimer { order: 5; } .home-v2 .pricing .section-subtitle { font-size: 1rem !important; line-height: 1.5 !important; color: #55614F !important; margin: 0 0 22px !important; } .home-v2 .pricing-grid { display: block !important; margin: 0 !important; } .home-v2 .pricing-card { background: var(--white) !important; border: 1px solid #E7E0CC !important; border-radius: 18px !important; box-shadow: 0 1px 3px rgba(27, 48, 34, 0.05) !important; padding: 18px 18px !important; margin: 0 0 12px !important; position: relative; overflow: visible !important; transform: none !important; } /* La formule cochée : fond vert, comme la maquette. */ .home-v2 .pricing-card.mh-selected { background: var(--bg-dark) !important; border-color: var(--bg-dark) !important; } /* Le badge desktop « Le + populaire » est remplacé par la pastille posée à côté du titre. */ .home-v2 .pricing-card .pricing-badge { display: none !important; } .home-v2 .pricing-row { display: flex !important; align-items: center !important; gap: 12px !important; } .home-v2 .mh-radio { display: block !important; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #D8D2BE; position: relative; } .home-v2 .mh-selected .mh-radio { border-color: var(--terracotta); background: var(--terracotta); } .home-v2 .mh-selected .mh-radio::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); } .home-v2 .pricing-row-left { flex: 1; min-width: 0; } /* Le libellé de catégorie devient le titre de la carte. */ .home-v2 .pricing-row-tag { display: inline !important; font-family: var(--font-body) !important; font-size: 1.12rem !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--forest) !important; margin: 0 !important; } .home-v2 .mh-selected .pricing-row-tag { color: var(--cream) !important; } .home-v2 .mh-tagpill { display: inline-block !important; vertical-align: 2px; margin-left: 7px; /* Serrée volontairement : « Bi-mensuel » + la pastille doivent tenir sur une ligne dans les 165 px de la colonne de gauche à 375 px. */ padding: 3px 9px; border-radius: var(--radius-full); /* Terracotta foncé : sur --terracotta, du blanc à cette taille ne fait que 3,35:1. Et 0,75 rem, le plancher du projet — 0,6 rem faisait 9,6 px, sous les 12 px minimum. */ background: #A9654A; color: var(--white); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .home-v2 .mh-tagpill-ghost { background: var(--terracotta-bg); color: #8F5139; } /* Le titre et la description tiennent sur une même phrase. */ .home-v2 .pricing-row-left h3 { display: inline !important; font-family: var(--font-body) !important; font-size: 0.96rem !important; font-weight: 400 !important; color: #55614F !important; margin: 0 !important; line-height: 1.45 !important; } .home-v2 .pricing-row-left h3::before { content: ''; display: block; height: 5px; } .home-v2 .pricing-row-left h3::after { content: ' · '; } .home-v2 .mh-selected .pricing-row-left h3 { color: rgba(255, 249, 229, 0.72) !important; } .home-v2 .pricing-row-left h3 .pricing-accent { font-style: normal !important; color: inherit !important; font-weight: 400 !important; } .home-v2 .pricing-desc-desktop { display: inline !important; font-size: 0.96rem !important; line-height: 1.45 !important; color: #55614F !important; margin: 0 !important; } .home-v2 .mh-selected .pricing-desc-desktop { color: rgba(255, 249, 229, 0.72) !important; } /* Déjà dit par le prix barré et par la note de bas de section. */ .home-v2 .pricing-row-credit { display: none !important; } .home-v2 .pricing-row-right { text-align: right; flex-shrink: 0; } .home-v2 .pricing-row-old { display: block; font-size: 0.85rem !important; color: #A8A18C !important; text-decoration: line-through; } .home-v2 .mh-selected .pricing-row-old { color: rgba(255, 249, 229, 0.45) !important; } .home-v2 .pricing-row-price { display: block; font-family: var(--font-display) !important; font-size: 1.75rem !important; font-weight: 700 !important; color: var(--forest) !important; line-height: 1.05; } .home-v2 .mh-selected .pricing-row-price { color: var(--cream) !important; } .home-v2 .pricing-row-period { display: block; font-size: 0.78rem !important; color: #8A8570 !important; } .home-v2 .mh-selected .pricing-row-period { color: rgba(255, 249, 229, 0.55) !important; } .home-v2 .pricing-cta-desktop { display: none !important; } .home-v2 .mh-plan-cta { display: block !important; margin: 10px 0 18px !important; padding: 19px 24px !important; border-radius: var(--radius-full) !important; background: var(--terracotta) !important; color: var(--white) !important; font-size: 1.1rem !important; font-weight: 700 !important; text-align: center; text-decoration: none; box-shadow: 0 4px 0 0 #A9654A; } .home-v2 .mh-plan-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 0 #A9654A; } /* Encart offre découverte */ .home-v2 .promo-banner { display: flex !important; flex-direction: row !important; /* style.css l'empile en colonne <768px */ align-items: center !important; text-align: left !important; gap: 12px; background: #FBEFE6 !important; border: 1px dashed var(--terracotta-light) !important; border-radius: 16px !important; padding: 16px 18px !important; margin: 0 0 14px !important; box-shadow: none !important; } .home-v2 .promo-banner .promo-badge { display: none !important; } .home-v2 .mh-promo-ico { display: block !important; width: 26px; height: 26px; flex-shrink: 0; color: var(--terracotta); } .home-v2 .promo-banner .promo-content { flex: 1; } .home-v2 .promo-banner h3 { font-family: var(--font-body) !important; font-size: 0.95rem !important; font-weight: 400 !important; color: var(--forest) !important; margin: 0 !important; line-height: 1.45 !important; } .home-v2 .promo-banner .promo-price { font-weight: 700 !important; color: var(--forest) !important; } .home-v2 .promo-banner .promo-old { text-decoration: none !important; color: inherit !important; font-size: inherit !important; } /* Pas de séparateur « · » entre les deux phrases : sur 335 px il se retrouvait seul sur sa ligne. Les deux lignes suffisent à les séparer. */ .home-v2 .promo-code-line { display: block !important; margin-top: 2px !important; font-size: 0.95rem !important; color: var(--forest) !important; margin: 0 !important; } .home-v2 .promo-code-line .promo-code-label { font-weight: 400; } .home-v2 .promo-code-btn { flex-shrink: 0; background: none !important; border: 0 !important; font-size: 1.3rem; padding: 8px !important; min-width: 44px; min-height: 44px; } .home-v2 .pricing-disclaimer { font-size: 0.8rem !important; line-height: 1.45 !important; font-style: normal !important; color: #8A8570 !important; text-align: left !important; margin: 0 !important; } /* ============================================================= 6. Avis clients ============================================================= */ .home-v2 .mh-avis { display: block !important; background: #FDF7E4 !important; padding: 30px 0 !important; } .home-v2 .mh-avis[hidden] { display: none !important; } .home-v2 .mh-avis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .home-v2 .mh-avis-score { text-align: right; flex-shrink: 0; padding-top: 18px; } .home-v2 .mh-avis-count { display: block; font-size: 0.85rem; font-weight: 600; color: #55614F; margin-top: 4px; } .home-v2 .mh-avis-count strong { color: var(--forest); } /* Les étoiles : une étoile grise sur laquelle on peint la part pleine, pour que 4,7 ne s'affiche pas comme 5. */ .home-v2 .mh-stars { display: inline-flex; gap: 3px; } .home-v2 .mh-star { --fill: 100%; font-size: 1rem; line-height: 1; background: linear-gradient(90deg, var(--gold) var(--fill), #DCD6C2 var(--fill)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Sans repli, un navigateur sans `background-clip: text` afficherait des étoiles transparentes — c'est-à-dire pas d'étoiles du tout. ⚠️ Le @supports est IMBRIQUÉ dans le @media : posé à côté, il s'appliquerait à toutes les largeurs et percerait le périmètre de ce fichier. C'est `npm run test:home` qui l'a attrapé. */ @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .home-v2 .mh-star { background: none; color: var(--gold); } } .home-v2 .mh-avis-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; } .home-v2 .mh-avis-track::-webkit-scrollbar { display: none; } .home-v2 .mh-avis-card { flex: 0 0 82%; scroll-snap-align: start; background: var(--white); border-radius: 18px; padding: 18px; margin: 0; box-shadow: 0 1px 3px rgba(27, 48, 34, 0.06); display: flex; flex-direction: column; } /* Les avis réels font de 28 à 90 mots. Sans pliage, les quatre cartes s'alignent sur la plus longue : 536 px de haut mesurés, dont une carte aux trois quarts vide. On plie à 7 lignes et on déplie sur demande — le texte entier reste dans la page, on n'en coupe jamais un mot. */ .home-v2 .mh-avis-card blockquote { font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--forest); margin: 12px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; } .home-v2 .mh-avis-card.mh-open blockquote { -webkit-line-clamp: unset; overflow: visible; } /* #9C5C42 et non --terracotta : la teinte de marque ne donne que 3,2:1 sur du blanc à cette taille. Même raison pour le lien vers Google. */ .home-v2 .mh-avis-more { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0; background: none; border: 0; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; color: #9C5C42; cursor: pointer; } .home-v2 .mh-avis-card figcaption { margin-top: auto; padding-top: 16px; } .home-v2 .mh-avis-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.85rem; font-weight: 700; color: var(--forest); } .home-v2 .mh-avis-plan { padding: 5px 11px; border-radius: var(--radius-full); background: var(--terracotta-bg); color: var(--terracotta); font-size: 0.72rem; font-weight: 700; white-space: nowrap; } .home-v2 .mh-avis-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 0.98rem; font-weight: 700; color: #9C5C42; text-decoration: none; } /* ============================================================= 7. Nos garanties ============================================================= */ .home-v2 .mh-garanties { display: block !important; background: #FDF7E4 !important; padding: 12px 0 30px !important; } .home-v2 .mh-gar-card { background: var(--white); border-radius: 20px; padding: 24px 20px; box-shadow: 0 1px 3px rgba(27, 48, 34, 0.06); } .home-v2 .mh-gar-intro { font-size: 0.98rem; line-height: 1.5; color: #55614F; margin: 0 0 20px; } .home-v2 .mh-gar-list { list-style: none; margin: 0; padding: 0; } .home-v2 .mh-gar-list li { display: flex; gap: 14px; padding-bottom: 20px; } .home-v2 .mh-gar-list li:last-child { padding-bottom: 0; } .home-v2 .mh-gar-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #EEF1EC; color: var(--forest); display: flex; align-items: center; justify-content: center; } .home-v2 .mh-gar-ico svg { width: 20px; height: 20px; } .home-v2 .mh-gar-list h3 { font-family: var(--font-body); font-size: 1.04rem; font-weight: 700; color: var(--forest); margin: 0 0 4px; line-height: 1.25; } .home-v2 .mh-gar-list p { font-size: 0.95rem; line-height: 1.45; color: #55614F; margin: 0; } /* ============================================================= 8. Offre Nutrition ============================================================= */ .home-v2 .nutrition-teaser { background: #FDF7E4 !important; padding: 6px 0 30px !important; } .home-v2 .pricing-nutrition-card { display: block !important; background: var(--bg-dark) !important; border: 0 !important; border-radius: 20px !important; padding: 24px 20px !important; margin: 0 !important; text-decoration: none; } .home-v2 .pricing-nutrition-tag { display: block !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 12px !important; } .home-v2 .pricing-nutrition-row { display: block !important; } .home-v2 .pricing-nutrition-left h3 { font-family: var(--font-display) !important; font-size: 1.45rem !important; line-height: 1.15 !important; color: var(--cream) !important; margin: 0 0 10px !important; } .home-v2 .pricing-nutrition-left h3 .pricing-accent { font-style: normal !important; color: inherit !important; } .home-v2 .pricing-nutrition-left p { font-size: 0.98rem !important; line-height: 1.5 !important; color: rgba(255, 249, 229, 0.72) !important; margin: 0 0 18px !important; } .home-v2 .pricing-nutrition-right { display: flex !important; align-items: baseline; gap: 10px; text-align: left !important; margin-bottom: 16px; } .home-v2 .pricing-nutrition-right .pricing-row-old { display: inline !important; color: rgba(255, 249, 229, 0.45) !important; font-size: 0.95rem !important; } .home-v2 .pricing-nutrition-right .pricing-row-price { display: inline !important; font-size: 2rem !important; color: var(--cream) !important; } .home-v2 .pricing-nutrition-right .pricing-row-period { display: inline !important; font-size: 0.85rem !important; color: rgba(255, 249, 229, 0.55) !important; } .home-v2 .pricing-nutrition-cta { display: inline-block !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--gold) !important; } /* ============================================================= 9. Nos sessions en vidéo ============================================================= */ .home-v2 .mh-reels { display: block !important; background: #FDF7E4 !important; padding: 6px 0 34px !important; } /* Le `!important` ci-dessus l'emporterait sur l'attribut `hidden` : sans cette ligne, la section s'afficherait vide quand le JS ne tourne pas. */ .home-v2 .mh-reels[hidden] { display: none !important; } .home-v2 .mh-reels-sub { font-size: 0.98rem; line-height: 1.5; color: #55614F; margin: 0 0 18px; } .home-v2 .mh-reels-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -20px 16px; padding: 0 20px; } .home-v2 .mh-reels-track::-webkit-scrollbar { display: none; } .home-v2 .mh-reel { position: relative; flex: 0 0 62%; scroll-snap-align: start; border-radius: 16px; overflow: hidden; text-decoration: none; display: block; aspect-ratio: 3 / 4; background: var(--forest); } .home-v2 .mh-reel img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Un voile sombre en bas, sinon le titre disparaît sur une photo claire. */ .home-v2 .mh-reel::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, rgba(27, 48, 34, 0), rgba(27, 48, 34, 0.78)); } .home-v2 .mh-reel-tag, .home-v2 .mh-reel-play, .home-v2 .mh-reel-title { position: absolute; z-index: 2; } .home-v2 .mh-reel-tag { top: 10px; left: 10px; padding: 5px 10px; border-radius: var(--radius-full); background: rgba(27, 48, 34, 0.7); color: var(--cream); font-size: 0.68rem; font-weight: 700; } .home-v2 .mh-reel-play { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 249, 229, 0.88); color: var(--forest); display: flex; align-items: center; justify-content: center; } .home-v2 .mh-reel-play svg { width: 26px; height: 26px; } .home-v2 .mh-reel-title { left: 12px; right: 12px; bottom: 12px; color: var(--white); font-size: 0.92rem; font-weight: 700; line-height: 1.25; } /* Pastilles réseaux */ .home-v2 .mh-social { display: flex !important; flex-wrap: wrap; gap: 10px; } .home-v2 .mh-social-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-full); border: 1px solid #D9D3BE; color: var(--forest); font-size: 0.95rem; font-weight: 700; text-decoration: none; } .home-v2 .mh-social-pill svg { width: 18px; height: 18px; } .home-v2 .mh-social-dark .mh-social-pill { border-color: rgba(255, 249, 229, 0.22); color: var(--cream); } /* ============================================================= 10. Zone d'intervention ============================================================= */ .home-v2 .zone { background: #FDF7E4 !important; padding: 6px 0 30px !important; } .home-v2 .zone .container { background: #EFEADA; border-radius: 20px; padding: 26px 20px !important; } .home-v2 .zone-grid { display: block !important; } /* La carte Leaflet n'est pas dans la maquette mobile : elle coûte deux connexions tierces et un long temps de rendu pour une information que le paragraphe juste au-dessus donne déjà en toutes lettres. */ .home-v2 .zone-map { display: none !important; } .home-v2 .zone-list { display: none !important; } .home-v2 .zone h2 { margin-bottom: 12px !important; } .home-v2 .zone-content > p { font-size: 0.98rem !important; line-height: 1.55 !important; color: #55614F !important; margin: 0 0 22px !important; } .home-v2 .zone-content > p strong { font-weight: 700; color: var(--forest); } .home-v2 .zone-expand { border-top: 1px solid #DCD5C0 !important; padding-top: 20px !important; margin-top: 0 !important; background: none !important; } .home-v2 .zone-expand-title { font-family: var(--font-body) !important; font-size: 1.06rem !important; font-weight: 700 !important; color: var(--forest) !important; margin: 0 0 8px !important; } .home-v2 .zone-expand-text { font-size: 0.96rem !important; line-height: 1.5 !important; color: #55614F !important; margin: 0 0 16px !important; } .home-v2 .zone-form { display: block !important; } .home-v2 .zone-form .form-input { width: 100% !important; margin-bottom: 10px !important; background: var(--white) !important; border: 1px solid #DCD5C0 !important; border-radius: 14px !important; padding: 15px 16px !important; font-size: 1rem !important; min-height: 48px; } .home-v2 .zone-form button { border-radius: var(--radius-full) !important; padding: 16px 24px !important; font-size: 1.02rem !important; font-weight: 700 !important; min-height: 48px; background: var(--terracotta) !important; color: var(--white) !important; border: 0 !important; } /* « Où intervenons-nous ? » tient sur une ligne à 375 px à cette taille ; au-dessus, le point d'interrogation part seul à la ligne suivante. */ .home-v2 .zone h2 { font-size: 1.68rem !important; } .home-v2 .zone h2 .text-accent { font-style: italic; color: var(--terracotta) !important; } /* ============================================================= 11. Nos engagements ============================================================= */ .home-v2 .engagements { background: #FDF7E4 !important; padding: 24px 0 30px !important; } .home-v2 .engagements-refined-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 18px; } .home-v2 .engagement-refined-card { background: var(--white) !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(27, 48, 34, 0.06) !important; padding: 18px 16px !important; text-align: left !important; } .home-v2 .engagement-emoji { display: block !important; font-size: 1.6rem !important; margin: 0 0 10px !important; } .home-v2 .engagement-refined-card h3 { font-family: var(--font-body) !important; font-size: 1.02rem !important; font-weight: 700 !important; color: var(--forest) !important; margin: 0 0 4px !important; } .home-v2 .engagement-refined-card p { font-size: 0.92rem !important; line-height: 1.4 !important; color: #55614F !important; margin: 0 !important; } /* ============================================================= 12. FAQ ============================================================= */ .home-v2 .faq { background: #FDF7E4 !important; padding: 18px 0 30px !important; } .home-v2 .faq h2 { font-size: 2.1rem !important; } .home-v2 .faq-grid { display: block !important; margin-top: 14px; } .home-v2 .faq-item { background: none !important; border: 0 !important; border-top: 1px solid #DCD5C0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } .home-v2 .faq-item:last-child { border-bottom: 1px solid #DCD5C0 !important; } .home-v2 .faq-question { padding: 20px 0 !important; background: none !important; gap: 16px; min-height: 48px; } .home-v2 .faq-question > span:first-child { font-size: 1.04rem !important; font-weight: 700 !important; color: var(--forest) !important; line-height: 1.3; text-align: left; } .home-v2 .faq-toggle { color: var(--terracotta) !important; font-size: 1.5rem !important; font-weight: 400 !important; flex-shrink: 0; } .home-v2 .faq-answer p { font-size: 0.98rem !important; line-height: 1.55 !important; color: #55614F !important; } /* ============================================================= 13. Appel final ============================================================= */ .home-v2 .cta-final { background: #FDF7E4 !important; padding: 6px 0 36px !important; } .home-v2 .cta-final .container { background: var(--terracotta); border-radius: 22px; padding: 34px 22px !important; text-align: center; } /* Le
du desktop coupe après « retrouver » ; sur 335 px la seconde moitié ne tient pas et le « ? » part seul à la ligne. On laisse le texte se replier tout seul. */ .home-v2 .cta-final h2 br { display: none !important; } .home-v2 .cta-final h2 { font-family: var(--font-display) !important; font-size: 1.78rem !important; line-height: 1.15 !important; color: var(--white) !important; text-align: center !important; margin: 0 0 22px !important; } .home-v2 .cta-final h2 .text-accent { font-style: italic; color: var(--white) !important; } .home-v2 .cta-final p { font-size: 0.98rem !important; color: rgba(255, 255, 255, 0.88) !important; margin: 0 0 22px !important; } .home-v2 .cta-final p strong { color: var(--white); } .home-v2 .cta-final .btn-lg { display: block !important; width: 100%; background: var(--cream) !important; color: var(--forest) !important; border: 0 !important; border-radius: var(--radius-full) !important; padding: 19px 24px !important; font-size: 1.1rem !important; font-weight: 700 !important; box-shadow: none !important; } /* ============================================================= 14. Pied de page ============================================================= */ .home-v2 .footer { background: var(--bg-dark) !important; padding: 34px 0 120px !important; /* place pour la barre fixe */ } .home-v2 .footer-grid { display: block !important; } /* Les colonnes « Navigation » et « Mon compte » répètent le menu du tiroir, à l'endroit où plus personne ne navigue. */ .home-v2 .footer-links { display: none !important; } .home-v2 .sap-badge { display: none !important; } .home-v2 .footer-brand p { font-size: 0.95rem !important; line-height: 1.5 !important; color: rgba(255, 249, 229, 0.6) !important; margin: 0 0 6px !important; } /* line-height 2,4 puis 12 px de marge interne : la zone tactile atteint 44 px SANS que deux lignes se recouvrent. Avec un interlignage normal, agrandir les cibles les fait se chevaucher et on appuie sur le mauvais lien — ce qui est pire qu'une petite cible. */ .home-v2 .mh-footer-contact { display: block !important; line-height: 2.4 !important; } .home-v2 .mh-footer-contact a { color: rgba(255, 249, 229, 0.62); text-decoration: none; padding: 12px 0; } .home-v2 .footer-brand .mh-social { margin-top: 18px; } .home-v2 .footer-bottom { display: block !important; border-top: 0 !important; margin-top: 22px !important; padding-top: 0 !important; text-align: left !important; } .home-v2 .mh-footer-zone { display: block !important; } /* 0,58 et non 0,4 : à 0,4 le crème sur le vert sombre tombe à 3,4:1. */ .home-v2 .footer-bottom p { font-size: 0.85rem !important; color: rgba(255, 249, 229, 0.58) !important; margin: 0 0 8px !important; } .home-v2 .footer-legal { display: flex !important; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-start !important; } .home-v2 .footer-legal a { font-size: 0.85rem !important; color: rgba(255, 249, 229, 0.58) !important; padding: 10px 0; } /* ============================================================= 15. Barre fixe ============================================================= */ .home-v2 .mobile-cta-bar { display: flex !important; align-items: center; gap: 12px; background: #FDF7E4 !important; border-top: 1px solid #E4DCC4 !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; } /* Le téléphone reste joignable par le menu et le pied de page ; ici la maquette lui préfère le prix. Une ligne à retirer pour revenir. */ .home-v2 .mobile-cta-tel { display: none !important; } .home-v2 .mh-bar-price { display: block !important; flex: 1; min-width: 0; } .home-v2 .mh-bar-price-value { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--forest); line-height: 1.1; } .home-v2 .mh-bar-price-note { display: block; font-size: 0.75rem; font-weight: 700; color: #55614F; line-height: 1.2; margin-top: 2px; } .home-v2 .mobile-cta-reserve { flex: 0 0 auto !important; width: auto !important; padding: 15px 32px !important; border-radius: var(--radius-full) !important; background: var(--terracotta) !important; color: var(--white) !important; font-size: 1.05rem !important; font-weight: 700 !important; box-shadow: 0 4px 0 0 #A9654A !important; } .home-v2 .mh-hide { display: none !important; } } /* fin @media (max-width: 768px) */ /* ============================================================= Très petits écrans ============================================================= */ @media (max-width: 380px) { .home-v2 .hero h1 { font-size: 2.2rem !important; } .home-v2 .mh-hero-price-value { font-size: 2.25rem; } .home-v2 .hero-stat-label { font-size: 0.64rem !important; } .home-v2 .pricing-row-price { font-size: 1.55rem !important; } .home-v2 .mobile-cta-reserve { padding: 15px 22px !important; } }