/* ============================================================
Contessa — couche de design 2026
Chargée APRÈS les styles de page : elle ne réécrit rien,
elle retonalise via les variables et affine les composants.
Pour revenir en arrière : retirer ce fichier des .
============================================================ */
/* ---------- 1. Typographie : parité avec l'imprimé ----------
Le flyer et le catalogue sont composés en Lora + Poppins.
Le site était en Cormorant + Inter. On aligne sur l'imprimé.
Les familles sont chargées par le de chaque page. */
/* Contessa - polices auto-hebergees.
Plus aucun appel a fonts.googleapis.com : une requete tierce de moins,
un point de conformite CNDP de moins, et un rendu plus rapide au Maroc. */
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lora-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lora-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/lora-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/lora-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/lora-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/lora-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lora-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lora-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/lora-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/lora-latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/lora-latin-500-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/lora-latin-ext-500-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/poppins-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/poppins-latin-ext-300-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/poppins-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/poppins-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/poppins-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/poppins-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/poppins-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/poppins-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ---------- 2. Jetons ---------- */
:root{
/* Thème « or et prune » (5 octobre 2026).
Papier ivoire, encre aubergine, or ancien pour les mots en
italique et les détails, prune pour les actions. */
--cream: #F6F2EB;
--cream-soft: #FCFAF6;
--cream-warm: #EEE6D8;
--ink: #1E1526; /* aubergine noir — 15,8:1 sur le papier */
--ink-soft: #3B2F45;
--ink-mid: #5F5468; /* 6,4:1 */
--taupe: #71667A; /* 4,9:1 */
--taupe-light: #B7ADBB;
--line: #E4DCCF;
/* --gold porte les actions (liens, boutons, icônes) : en prune,
parce que l'or clair tombe à 2:1 sur le papier.
--gold-text porte l'or : mots en italique des titres, surtitres,
chiffres. Or ancien, 4,8 à 5,7:1 sur toutes les surfaces claires. */
--gold: #4B2C5E; /* prune — 10,3:1 */
--gold-soft: #D9C189; /* champagne */
--gold-deep: #341C45;
--gold-text: #7F5E26; /* or ancien */
--gilt: #C9A86A; /* l'or d'origine : filets, puces, étoiles, et texte sur fond sombre */
/* Voiles */
--veil: #EFE8F0; /* lilas pâle */
--veil-strong: #DDD0E2;
--serif: 'Lora', Georgia, 'Times New Roman', serif;
--sans: 'Poppins', system-ui, -apple-system, sans-serif;
/* Un seul rayon par rôle. */
--radius: 14px;
--radius-lg: 22px;
--radius-xs: 8px;
/* Une seule ombre porte du poids : celle sous les produits.
Le reste de la hiérarchie passe par la couleur de surface. */
--shadow-soft: 0 1px 2px rgba(30,21,38,.035);
--shadow-md: 0 2px 8px rgba(30,21,38,.05), 0 14px 34px rgba(30,21,38,.07);
--shadow-lg: 0 30px 80px rgba(30,21,38,.16);
--shadow-obj: 0 18px 48px rgba(30,21,38,.20);
--ease: cubic-bezier(.22,1,.36,1);
}
html[dir="rtl"], [lang="ar"]{
--sans: 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', system-ui, sans-serif;
}
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{
font-family: 'IBM Plex Sans Arabic', serif;
font-weight: 600;
letter-spacing: 0;
}
/* Lora est plus large que Cormorant : on resserre les grands titres. */
h1, .h1, .hero h1{ letter-spacing: -.021em; }
h2, .h2{ letter-spacing: -.014em; }
body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* ---------- 3. Le lavande parasite ----------
.product-card portait --mag:#B79CDB, un violet hors palette. */
.product-card{
--mag: #2A6B52;
--mag-soft: rgba(75,44,94,.22);
}
/* ---------- 4. Profondeur : une seule ombre, sur l'objet ----------
Les cartes ne flottent plus, elles reposent. Ce qui flotte,
c'est le produit au-dessus de sa surface. */
.product-card,
.cat-card,
.why-cell,
.faq-item{
box-shadow: none;
border: 1px solid var(--line);
background: var(--cream-soft);
transition: transform .55s var(--ease), border-color .4s ease, background .4s ease;
}
.product-card:hover,
.cat-card:hover{
transform: translateY(-4px);
border-color: var(--gold-soft);
}
.pc-img img,
.product-hero img,
.family-models img{
filter: drop-shadow(var(--shadow-obj));
transition: transform .7s var(--ease);
}
.product-card:hover .pc-img img{ transform: scale(1.035); }
/* ---------- 5. Actions ---------- */
.btn{
transition: transform .18s var(--ease), background .3s ease,
color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.btn:active{ transform: scale(.975); }
.btn-primary{ background: var(--ink); color: var(--cream-soft); }
.btn-primary:hover{ background: var(--gold-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost{ border-color: var(--gold); color: var(--gold); }
.btn-ghost:hover{ background: var(--gold); color: #fff; border-color: var(--gold); }
/* Un anneau de focus visible partout : il n'y en avait aucun. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
/* ---------- 6. Le mouvement : entrer, jamais s'agiter ----------
Un seul geste, réutilisé partout : monter de 22px en s'ouvrant.
Il sert la hiérarchie (on lit dans l'ordre), pas la décoration. */
.reveal{
opacity: 0;
transform: translateY(14px);
transition: opacity .45s var(--ease), transform .45s var(--ease);
will-change: opacity, transform;
}
.reveal.visible, .reveal.in, .revealed .reveal{
opacity: 1;
transform: none;
will-change: auto;
}
.reveal[data-d="1"]{ transition-delay: .04s; }
.reveal[data-d="2"]{ transition-delay: .08s; }
.reveal[data-d="3"]{ transition-delay: .12s; }
.reveal[data-d="4"]{ transition-delay: .16s; }
.reveal[data-d="5"]{ transition-delay: .2s; }
/* Les barres qui suivent le scroll flottent réellement au-dessus
du contenu, au lieu de l'occulter. */
.sticky-bar, .cart-bar, .order-bar, .floating-bar, header.sticky, .site-header{
backdrop-filter: saturate(170%) blur(18px);
-webkit-backdrop-filter: saturate(170%) blur(18px);
}
@media (prefers-reduced-transparency: reduce){
.sticky-bar, .cart-bar, .order-bar, .floating-bar, header.sticky, .site-header{
backdrop-filter: none; -webkit-backdrop-filter: none;
background: var(--cream-soft);
}
}
@media (prefers-reduced-motion: reduce){
.reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
*, *::before, *::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- 7. Respiration ----------
Le vide autour d'un produit est ce qui le rend cher. */
.section{ padding-block: clamp(56px, 7vw, 104px); }
.section-head{ margin-bottom: clamp(28px, 3.4vw, 48px); }
.lead{ max-width: 62ch; line-height: 1.68; }
p{ line-height: 1.66; }
/* ---------- 8. Surfaces sombres ----------
Le changement de fond sert de séparateur : pas de trait, pas de cadre. */
.band-dark, .dark-section, .cta-dark, .showroom{
background: var(--ink);
color: var(--cream-soft);
}
.band-dark .eyebrow, .dark-section .eyebrow,
.cta-dark .eyebrow, .showroom .eyebrow{ color: var(--gold-soft); }
.band-dark a, .dark-section a, .cta-dark a, .showroom a{ color: var(--gold-soft); }
/* ---------- 9. Détails de confiance ----------
Ce sont les endroits où le client décide qu'il est en de bonnes mains. */
.trust-item, .hero-trust, .info-line{ color: var(--ink-soft); }
.chip{
background: var(--cream-soft);
border: 1px solid var(--line);
color: var(--ink-soft);
}
.chip-gold{
background: var(--veil);
border-color: var(--veil-strong);
color: var(--gold-deep);
}
.eyebrow{ color: var(--gold); letter-spacing: .18em; }
.gold, .accent{ color: var(--gold); }
/* Prix : chiffres tabulaires, jamais de chasse qui danse. */
.pc-price, .price, .stat .num, .num{
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ---------- 10. Images : réserver la place, jamais de saut ---------- */
img{ max-width: 100%; height: auto; }
.pc-img{ background: var(--cream-warm); }
/* ============================================================
11. Surfaces sombres — l'accent s'inverse
Le vert profond est fait pour le papier. Sur les fonds encre
(pieds de page, bandeaux, sections sombres) il tombait à 1,9:1.
On n'inverse QUE l'accent : --ink reste intact, c'est lui qui
peint le fond de ces sections.
============================================================ */
:root{ --on-dark: #C9A86A; }
.topbar,
footer.foot, footer.site-foot, footer.footer, .on-dark,
.kpis-section, .maison-section, .cities-section,
.roi-section, .pack-section, .cta-section,
.commission-section, .contact-cta, .map-section,
.showroom, .cart-overlay, .cat-card.feature, .promo-card.dark{
--gold: var(--on-dark);
--gold-deep: var(--on-dark);
--gold-text: var(--on-dark);
--gold-soft: #E2CB95;
--green: var(--on-dark);
--gold-fill: var(--on-dark);
}
.topbar a, footer.foot a, footer.site-foot a, footer.footer a, .on-dark a{ color: var(--on-dark); }
/* Correctif mesuré au chargement : si un conteneur listé ci-dessus se
révèle clair sur une page donnée, il reprend l'accent foncé. */
.on-light{ --gold: #4B2C5E; --gold-deep: #341C45; --gold-text: #7F5E26; --gold-soft: #D9C189; }
.on-light a{ color: #4B2C5E; }
.on-light .btn-ghost{ color: #4B2C5E; border-color: #4B2C5E; }
.on-light .btn-gold{ background: #4B2C5E; color: #fff; }
.on-light .btn-primary{ background: #1E1526; color: var(--cream-soft); }
.kpis-section em, .roi-copy em, .pack-copy em,
.cities-section em, .maison-section em, .commission-section em,
.contact-cta em, .showroom em,
.kpi .num, .roi-num, .pack-total span, .pack-card-head{ color: var(--on-dark); }
/* .cat-card.feature : fond sombre, texte écrit en dur en tons chauds. */
.cat-card.feature .cat-eyebrow{ color: var(--on-dark) !important; }
.cat-card.feature h4{ color: var(--cream-soft) !important; }
.cat-card.feature p{ color: rgba(250,245,236,.82) !important; }
/* Les boutons pleins doivent rester lisibles sur les deux fonds. */
.btn-gold{ background: #4B2C5E; color: #fff; border-color: transparent; }
.btn-gold:hover{ background: #341C45; color: #fff; }
.topbar .btn-gold, footer .btn-gold, .kpis-section .btn-gold, .cta-section .btn-gold, .contact-cta .btn-gold,
.showroom .btn-gold, .pack-section .btn-gold, .map-section .btn-gold{
background: #C9A86A; color: #1E1526; border-color: transparent;
}
.topbar .btn-gold:hover, footer .btn-gold:hover, .cta-block .btn-gold:hover,
.cta-section .btn-gold:hover, .contact-cta .btn-gold:hover,
.showroom .btn-gold:hover, .map-section .btn-gold:hover{ background: #E2CB95; color: #1E1526; }
/* Un bouton encre posé sur une section encre disparaît : on l'inverse. */
.cta-section .btn-primary, .contact-cta .btn-primary,
.showroom .btn-primary, .kpis-section .btn-primary, .pack-section .btn-primary,
.map-section .btn-primary, footer .btn-primary{
background: var(--cream-soft); color: #1E1526; border-color: transparent;
}
.cta-section .btn-primary:hover,
.contact-cta .btn-primary:hover, .showroom .btn-primary:hover,
.map-section .btn-primary:hover, footer .btn-primary:hover{ background: #fff; color: #1E1526; }
.cta-section .btn-ghost, .contact-cta .btn-ghost,
.showroom .btn-ghost, .map-section .btn-ghost, footer .btn-ghost{
color: var(--on-dark); border-color: var(--on-dark); background: transparent;
}
.cta-section .btn-ghost:hover,
.contact-cta .btn-ghost:hover, .showroom .btn-ghost:hover{ background: var(--on-dark); color: #1E1526; }
/* Étiquettes posées sur un aplat vert : texte blanc, pas encre. */
.pc-tag.gold, .step-row.gold .step-num, .badge-gold, .tag-gold{
background: #4B2C5E; color: #fff;
}
.flagship-card .pc-tag, .product-card .pc-tag.gold{ color: #fff; }
/* La puce porte son propre fond : elle est lisible que la carte
derrière elle soit claire ou sombre. */
.chip-gold, .chip-gold *{ color: #341C45 !important; }
.chip-gold{ background: #E2CB95 !important; border-color: #C9A86A !important; }
/* ============================================================
12. Fiches produit — couleurs écrites en dur avant les jetons
============================================================ */
.logo small, .brandsub{ color: #4E5B51 !important; }
.crumbs, .crumbs a{ color: #665B6E !important; }
.kicker, .eyebrow.kicker{ color: #4B2C5E !important; }
.price small, .pnote{ color: #665B6E !important; }
/* Bloc showroom de /commander : gris et encre écrits en dur sur fond encre. */
.sh-row span, .sh-row div > span{ color: #CFC5D2; }
.mapcard .pin b{ color: var(--cream-soft); }
.mapcard .pin span span{ color: #C9A86A; }
/* ============================================================
13. Alias de familles
Le site appelait encore Jost, Cormorant Garamond et Noto Kufi
par leur nom, dans des règles dispersées. Plutôt que de les
réécrire une par une, on redirige ces noms vers les polices
auto-hébergées : toute règle existante suit automatiquement.
============================================================ */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/poppins-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/poppins-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/poppins-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/poppins-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lora-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/lora-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/lora-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lora-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/lora-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/lora-latin-500-italic.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/poppins-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/poppins-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/poppins-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC;}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC;}
/* ============================================================
14. /commander — la page de commande avait sa propre palette
(papier chaud, laiton, Jost). Elle rejoint celle du site.
============================================================ */
:root{
--paper: #F6F2EB;
--paper-2: #EEE6D8;
--white: #FBFCF9;
--wash: #EFE8F0;
--ink-2: #3B2F45;
--ink-3: #525E56;
--ink-4: #5B6760;
--gold-2: #C9A86A;
--gold-fill: #4B2C5E;
--gold-fill-2: #341C45;
--green: #4B2C5E;
--green-bg: #EFE8F0;
--line: rgba(30,21,38,.11);
--line-2: rgba(30,21,38,.18);
}
/* ============================================================
15. Deux défauts de mise en page relevés à la capture
============================================================ */
/* Les filets décoratifs du hero traversaient le titre au format
téléphone : ils se lisaient comme un texte barré. */
@media (max-width: 860px){ .float-rule{ display: none; } }
.float-rule{ z-index: 0; opacity: .5; }
/* La barre d'achat fixe recouvrait le prix en bas de fiche. */
body:has(.sticky){ padding-bottom: 92px; }
body:has(.cart-bar), body:has(.order-bar){ padding-bottom: 92px; }
/* Le surlignage du titre était un ::after de 100% de large : sur un
titre qui passe à la ligne, il barrait la dernière ligne. On le
remplace par un fond dégradé porté par le texte lui-même, qui suit
chaque ligne (box-decoration-break). */
.accent::after, .hero-top h1 .accent::after{ content: none !important; }
.accent{
background-image: linear-gradient(to top, rgba(75,44,94,.22) 0 .28em, transparent .28em);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding-inline: .04em;
}
.hero h1{ line-height: 1.08; }
/* .accent était inline-block : le fond ne pouvait pas suivre les lignes. */
.hero h1 .accent, .accent{ display: inline !important; position: static !important; }
.hero h1 .italic{ display: block; }
/* Les pages de famille /serrures/ n'avaient aucune police de corps
déclarée et retombaient sur Times. Le corps est Poppins partout. */
body{ font-family: var(--sans); }
h1, h2, h3, .serif{ font-family: var(--serif); }
/* ============================================================
16. Fiches produit — grammaire « une capacité = un moment »
Inspirée des pages produit Tapo : un titre de deux à quatre
mots, une ligne, une grille d'icônes. Les bandes alternent
papier / encre, et le changement de fond sert de séparateur.
============================================================ */
.ways, .access, .compat{ padding-block: clamp(36px, 5vw, 64px); }
.ways h2, .access h2, .compat h2, .band-dark h2{
font-family: var(--serif); font-weight: 500; letter-spacing: -.016em;
font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; margin: 0 0 8px;
}
.ways .sub, .access .sub, .compat .sub{
color: var(--ink-mid); max-width: 56ch; margin: 0 0 clamp(20px, 2.6vw, 32px); line-height: 1.6;
}
.ways-grid{
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.access-grid, .compat-grid{
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.way{
display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
background: var(--cream-soft); border: 1px solid var(--line);
border-radius: var(--radius); padding: 18px 16px 16px;
transition: transform .5s var(--ease), border-color .35s ease;
}
.way:hover{ transform: translateY(-3px); border-color: var(--gold-soft); }
.way b{ font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -.005em; color: var(--ink); }
.way > span:not(.way-ic){ color: var(--ink-mid); font-size: 13.5px; line-height: 1.5; }
.way-ic{
width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
background: var(--veil); color: var(--gold-deep);
}
.way-ic svg{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ways-grid .way{ align-items: center; text-align: center; padding: 20px 10px 16px; }
.ways-grid .way b{ font-size: 13.5px; }
.compat .btn{ margin-top: clamp(18px, 2.4vw, 28px); }
/* La bande sombre : pleine largeur dans une page à colonne centrale. */
.band-dark{
background: var(--ink); color: var(--cream-soft);
margin-inline: calc(50% - 50vw); padding: clamp(44px, 6vw, 80px) 0;
margin-block: clamp(28px, 4vw, 56px);
}
.band-dark .band-in{ max-width: var(--max, 1080px); margin: 0 auto; padding: 0 var(--pad-x, 24px); }
.band-dark h2{ color: var(--cream-soft); margin-bottom: clamp(22px, 3vw, 36px); }
.steps3{ display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.steps3 > div{ display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.steps3 b{ font-family: var(--sans); font-weight: 600; font-size: 16px; color: #fff; }
.steps3 span{ color: #CFC5D2; font-size: 14.5px; line-height: 1.55; }
@media (max-width: 640px){
.ways-grid{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ways-grid .way{ padding: 16px 8px 14px; }
.ways-grid .way b{ font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce){ .way:hover{ transform: none; } }
@media (max-width: 640px){
.ways-grid[data-n="4"], .ways-grid[data-n="2"]{ grid-template-columns: repeat(2, 1fr); }
}
/* Accueil — « Choisir par besoin », la rangée de catégories sous le hero. */
.byneed{ padding-block: clamp(22px, 3vw, 36px) clamp(10px, 2vw, 20px); }
.byneed-h{ font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.012em; margin: 0 0 16px; }
.byneed-grid{ display: grid; gap: 12px; grid-template-columns: repeat(5, 1fr); }
.byneed .way{ text-decoration: none; color: inherit; }
.byneed .way b{ font-size: 14.5px; }
.byneed .way > span:not(.way-ic){ font-size: 12.5px; }
@media (max-width: 900px){ .byneed-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){
.byneed-grid{ display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.byneed-grid::-webkit-scrollbar{ display: none; }
.byneed .way{ flex: 0 0 46%; scroll-snap-align: start; }
}
/* ============================================================
17. Accueil — « Chaque porte, la bonne serrure » et l'écosystème
(Nuki / Aqara : par usage, scénarios, ce qui marche ensemble)
============================================================ */
.rooms-grid{ display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.room{
display: grid; grid-template-rows: auto 1fr auto; gap: 18px;
background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: clamp(22px, 2.6vw, 32px);
transition: transform .55s var(--ease), border-color .4s ease;
}
.room:hover{ transform: translateY(-4px); border-color: var(--gold-soft); }
.room-tag{ display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--gold-deep); background: var(--veil); border-radius: 999px; padding: 5px 11px; margin-bottom: 12px; }
.room h3{ font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.014em; margin: 0 0 8px; }
.room-head p{ margin: 0; color: var(--ink-mid); line-height: 1.6; font-size: 15px; }
.room-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.room-list li a{ display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 14.5px; }
.room-list li a:hover span{ color: var(--gold); }
.room-list b{ font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.room-cta{ color: var(--gold); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.room-cta:hover{ text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 820px){ .rooms-grid{ grid-template-columns: 1fr; } }
.eco-section{ background: var(--cream-warm); margin-inline: calc(50% - 50vw); padding-inline: var(--pad-x, 24px); }
.eco-section .container{ max-width: var(--max, 1280px); margin: 0 auto; }
.eco-grid{ display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.eco-card{ background: var(--cream-soft); }
.eco-card b{ font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.eco-note{ margin: 18px 0 0; color: var(--ink-mid); font-size: 14px; }
@media (max-width: 820px){ .eco-grid{ grid-template-columns: 1fr; } }
/* Hero, format téléphone : le lien « Voir la X5 » se retrouvait sous
l'étiquette « Flagship ». Le lien rejoint le bas de la carte. */
@media (max-width: 860px){
.hero-half{ position: relative; }
.hero-half .hero-half-cta{
position: absolute; right: 16px; bottom: 16px;
background: #1E1526 !important; color: #F6F2EB !important;
padding: 8px 13px; border-radius: 999px; font-weight: 600; font-size: 12.5px;
border: 0; opacity: 1 !important; transform: none !important; filter: none !important; z-index: 20;
}
}
/* Accueil — quatre temps au lieu de trois, appel final, contact en pied de page */
.howto-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .howto-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .howto-4{ grid-template-columns: 1fr; } }
.final-sub{ max-width: 52ch; margin: 10px auto 24px; color: var(--ink-mid); line-height: 1.6; }
.foot-contact{ display: grid; gap: 10px; margin: 14px 0 18px; }
.foot-wa{ display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 10px 16px; border-radius: 999px; background: #C9A86A !important; color: #1E1526 !important; font-weight: 600; font-size: 14px; text-decoration: none; }
.foot-wa:hover{ background: #E2CB95 !important; }
.foot-tel{ font-variant-numeric: tabular-nums; font-size: 15px; color: var(--cream-soft) !important; text-decoration: none; }
.foot-tel:hover{ text-decoration: underline; text-underline-offset: 4px; }
/* ============================================================
18. Contrôle à 320 / 375 / 390 / 430 px
============================================================ */
/* En-tête : à 320 px les quatre boutons d'action débordaient de 55 px.
Le bouton favoris passe dans le menu, les autres se resserrent. */
@media (max-width: 360px){
.nav-actions{ gap: 6px; }
.nav-actions .icon-btn{ width: 40px; height: 40px; }
.nav-actions .wishlist-btn{ display: none; }
}
/* « Choisir par besoin » : les tuiles avaient une largeur fixe à 46 % + padding. */
@media (max-width: 560px){
.byneed .way{ flex: 0 0 min(46%, 150px); box-sizing: border-box; }
}
/* Les marques [À COMPLÉTER] des pages légales ne doivent pas déborder. */
mark.todo-legal{ display: inline; overflow-wrap: anywhere; }
/* Texte minimum 12 px : les puces des cartes produit étaient à 10,5 px. */
.chip, .pc-tag, .cat-eyebrow, .room-tag, .hero-half-badge{ font-size: 12px; }
.pc-features .chip{ font-size: 12px; padding: 5px 10px; }
.wishlist-count, .cart-count{ font-size: 12px; }
/* Cibles tactiles : 44 px pour les commutateurs de langue et les filtres. */
.lang-switcher .lang-btn, .lang-btn{ min-height: 40px; min-width: 40px; padding-inline: 12px; }
.faq-filters .chip, .filters .chip, button.chip, a.chip-filter{ min-height: 42px; padding-inline: 16px; }
/* /commander : toute la page est composée sur une base de .72rem (11,5 px).
Plutôt que de retoucher 41 règles, on relève la base : .72rem = 12,2 px. */
html:has(body.page-commander){ font-size: 17px; }
body.page-commander .langs button{ min-height: 40px; min-width: 40px; }
/* En-tête à 320 px : encore 5 px de trop. */
@media (max-width: 340px){
.nav-actions{ gap: 4px; }
.nav-actions .icon-btn{ width: 36px; height: 36px; }
.logo-name{ font-size: 22px; }
}
.byneed .container{ overflow: hidden; }
.byneed-grid{ max-width: 100%; }
/* Accueil : étiquettes de 11 px sur les cartes du hero et le menu WhatsApp. */
.hero-half-tag, .wa-label, .pay, .wa-launcher-menu-head, .wa-agent-num{ font-size: 12px; }
@media (max-width: 340px){
.nav-actions .icon-btn{ width: 34px; height: 34px; }
.nav-actions{ margin-inline-end: -4px; }
.faq-side{ width: auto; max-width: 100%; min-width: 0; }
.faq-layout, .faq-grid{ grid-template-columns: 1fr; }
}
.faq-side{ max-width: 100%; }
.pay, .wa-agent-num{ font-size: 12px !important; }
@media (max-width: 340px){
.nav-actions .icon-btn{ min-width: 34px !important; }
.pay-icons{ flex-wrap: wrap; max-width: 100%; }
}
/* Le panneau du panier est hors écran tant qu'il est fermé : il ne doit
pas élargir la page. */
.cart-panel{ visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
.cart-panel.open, .cart-panel.is-open, body.cart-open .cart-panel{ visibility: visible; transition-delay: 0s; }
/* Pages légales : les marques ne peuvent pas dépasser la colonne. */
.legal-body, .legal, .prose, main.wrap{ overflow-wrap: anywhere; }
mark.todo-legal{ box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.todo-legal{ padding-inline: 0; box-shadow: 0 0 0 3px #FFF1A8; background: #FFF1A8; }
/* /b2b : le formulaire restait sur deux colonnes au téléphone et débordait
de 435 px à 320 px. Les champs ne peuvent pas être plus larges que leur colonne. */
@media (max-width: 720px){
.contact-form .fields, .fields{ grid-template-columns: 1fr; }
.contact-form{ padding: 20px; }
}
.fields .f, .f input, .f select, .f textarea{ min-width: 0; max-width: 100%; box-sizing: border-box; }
.f input, .f select, .f textarea{ width: 100%; min-height: 44px; }
/* Texte : plancher à 12 px sur les derniers libellés. */
.kicker, .roi-label, .use-tag, .step-time, .f label, .crumbs, .crumbs a, p.crumbs,
.logo small, .brandsub, .a, .legal-grid span, .ident span{ font-size: 12px !important; }
.logo small{ letter-spacing: .14em; }
/* Onglets de la FAQ : 44 px. */
.cat-tabs .cat-tab, .cat-tab{ min-height: 44px; padding-block: 10px; }
/* /categories : la carte promo sombre avait perdu son fond. */
.promo-card.dark{ background: var(--ink) !important; color: var(--cream-soft); }
.promo-card.dark h3, .promo-card.dark strong{ color: var(--cream-soft); }
/* Derniers libellés sous 12 px. */
.logo-sub, .pc-sister-label, .promo-tag, span.label, .mhint{ font-size: 12px !important; }
.logo-sub{ letter-spacing: .14em; }
/* ============================================================
19. Le film — structure Basalte : un écran, un message, l'image
fait le travail. La navigation flotte, transparente, puis se pose.
============================================================ */
.film{
position: relative; min-height: 100dvh; min-height: 100svh;
display: grid; align-items: end; overflow: hidden;
background: #150E1B; color: var(--cream-soft);
margin-top: calc(-1 * var(--header-h, 0px));
}
.film-video{
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 45%;
filter: saturate(.92);
}
.film-veil{
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(21,14,27,.55) 0%, rgba(21,14,27,.10) 35%, rgba(21,14,27,.72) 100%),
radial-gradient(120% 80% at 50% 100%, rgba(21,14,27,.55), transparent 60%);
}
.film-in{ position: relative; z-index: 2; padding-bottom: clamp(56px, 9vh, 120px); padding-top: clamp(140px, 22vh, 220px); max-width: var(--max, 1280px); }
.film .eyebrow{ color: var(--on-dark); }
.film .eyebrow::before{ background: var(--on-dark); }
.film h1{
color: #fff; font-weight: 500; letter-spacing: -.022em; line-height: 1.04;
font-size: clamp(34px, 5.6vw, 72px); max-width: 16ch; margin: 14px 0 0; text-align: left;
}
.film h1 .italic{ display: block; font-style: italic; font-weight: 400; color: rgba(255,255,255,.86); }
.film h1 .accent{ background-image: linear-gradient(to top, rgba(201,168,106,.26) 0 .26em, transparent .26em); }
.film .hero-darija{ color: var(--on-dark); margin: 10px 0 0; text-align: left; font-size: clamp(18px, 2vw, 24px); }
.film .lead{ color: rgba(255,255,255,.82); max-width: 52ch; margin: 22px 0 0; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; }
.film .hero-ctas{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; justify-content: flex-start; }
.film .btn-primary{ background: var(--cream-soft); color: #1E1526; }
.film .btn-primary:hover{ background: #fff; color: #1E1526; }
.film .btn-ghost{ color: #fff; border-color: rgba(255,255,255,.55); }
.film .btn-ghost:hover{ background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.film .hero-trust{ color: rgba(255,255,255,.62); margin-top: 18px; font-size: 13.5px; text-align: left; }
.film .hero-trust a{ color: inherit; }
.film-film{
position: absolute; right: clamp(20px, 4vw, 56px); bottom: 28px; z-index: 2;
color: rgba(255,255,255,.7); font-size: 13px; letter-spacing: .06em; text-decoration: none;
}
.film-film:hover{ color: #fff; }
.film-top, .film-bottom{ text-align: left; }
.film-top .eyebrow{ justify-content: flex-start; }
@media (max-width: 640px){
.film-in{ padding-bottom: 72px; padding-top: 120px; }
.film h1{ font-size: clamp(32px, 9.4vw, 40px); }
.film-film{ display: none; }
}
/* Sans animation ni données : l'affiche suffit. */
@media (prefers-reduced-motion: reduce){ .film-video{ display: none; } .film{ background: #150E1B url('/video/hero-landscape.jpg') center/cover no-repeat; } }
/* Le hero d'origine devient la section qui suit le film : cartes, chiffres, confiance, étapes. */
.hero-after-film{ padding-top: clamp(40px, 6vw, 72px); }
.hero-after-film::before{ display: none; }
.hero-after-film .hero-duo{ margin-top: 0; }
.hero-after-film .hero-bottom{ margin-top: clamp(24px, 3vw, 40px); }
/* Navigation : transparente sur le film, posée ensuite. */
body.has-film .site-header, body.has-film header.sticky, body.has-film .topbar{ transition: background .35s ease, color .35s ease, border-color .35s ease; }
body.has-film.on-film .site-header, body.has-film.on-film header.sticky{
background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
border-color: transparent !important; box-shadow: none !important; color: #fff;
}
body.has-film.on-film .site-header a, body.has-film.on-film header.sticky a,
body.has-film.on-film .site-header .logo-name, body.has-film.on-film .nav-links a,
body.has-film.on-film .icon-btn{ color: #fff !important; }
body.has-film.on-film .icon-btn{ background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.18) !important; }
body.has-film.on-film .btn-header-cta{ background: var(--cream-soft) !important; color: #1E1526 !important; }
body.has-film.on-film .lang-switcher, body.has-film.on-film .lang-btn{ color: #fff !important; }
body.has-film.on-film .lang-btn.active{ background: #fff !important; color: #1E1526 !important; }
/* Le bandeau du haut répète ce que dit le film : il disparaît sur l'accueil. */
body.has-film .topbar{ display: none; }
/* ============================================================
20. « Le geste » — un plan et quarante mots
============================================================ */
.geste{ background: var(--cream-warm); margin-inline: calc(50% - 50vw); padding-inline: var(--pad-x, 24px); }
.geste-in{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: var(--max, 1280px); margin: 0 auto; }
.geste-media{ border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; background: #150E1B; filter: drop-shadow(var(--shadow-obj)); }
.geste-media video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.geste-copy h2{ font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.018em; margin: 0 0 16px; }
.geste-copy h2 em{ color: var(--gold-text); }
.geste-copy p{ color: var(--ink-soft); font-size: 16.5px; line-height: 1.66; max-width: 46ch; margin: 0 0 22px; }
@media (max-width: 820px){ .geste-in{ grid-template-columns: 1fr; } .geste-media{ max-width: 420px; } }
/* Film : corrections de lecture */
.film h1 .accent{ color: var(--on-dark); }
.film-veil{
background:
linear-gradient(90deg, rgba(21,14,27,.78) 0%, rgba(21,14,27,.45) 42%, rgba(21,14,27,.08) 75%),
linear-gradient(180deg, rgba(21,14,27,.50) 0%, rgba(21,14,27,0) 30%, rgba(21,14,27,.70) 100%);
}
@media (min-width: 641px){ .film .hero-ctas{ flex-direction: row; } }
body.has-film.on-film .btn-header-cta, body.has-film.on-film .btn-header-cta *{ color: #1E1526 !important; }
body.has-film.on-film .lang-switcher{ background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.2) !important; }
body.has-film.on-film .lang-btn{ background: transparent !important; color: #fff !important; }
body.has-film.on-film .lang-btn.active{ background: #fff !important; color: #1E1526 !important; }
body.has-film.on-film .site-header a.btn-header-cta,
body.has-film.on-film .site-header a.btn-header-cta *{ color: #1E1526 !important; }
.film .hero-top .eyebrow{ color: var(--on-dark) !important; }
.film .hero-top .eyebrow::before{ background: var(--on-dark) !important; }
/* Le lien des cartes du hero passe en pastille à toutes les largeurs. */
.hero-half{ position: relative; }
.hero-half .hero-half-cta{
position: absolute; right: 16px; bottom: 16px; z-index: 20;
background: #1E1526 !important; color: #F6F2EB !important;
padding: 8px 13px; border-radius: 999px; font-weight: 600; font-size: 12.5px;
border: 0; opacity: 1 !important; transform: none !important; filter: none !important;
}
/* Le voile : mesuré pixel par pixel sous le titre, le pire point était à 3:1.
Un troisième dégradé, centré sur la zone du texte, le porte au-delà de 4,5:1. */
.film-veil{
background:
radial-gradient(90% 70% at 18% 42%, rgba(21,14,27,.78), rgba(21,14,27,.0) 70%),
linear-gradient(90deg, rgba(21,14,27,.82) 0%, rgba(21,14,27,.50) 42%, rgba(21,14,27,.10) 75%),
linear-gradient(180deg, rgba(21,14,27,.50) 0%, rgba(21,14,27,0) 30%, rgba(21,14,27,.72) 100%);
}
/* Lecture/pause : une vidéo qui démarre seule doit pouvoir s'arrêter (HIG). */
.film-ctl, .geste-ctl{
position: absolute; z-index: 3; width: 44px; height: 44px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.35); background: rgba(21,14,27,.45); color: #fff;
display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px);
}
.film-ctl{ left: clamp(20px, 4vw, 56px); bottom: 24px; }
.geste-media{ position: relative; }
.geste-ctl{ right: 14px; bottom: 14px; }
.film-ctl svg, .geste-ctl svg{ width: 18px; height: 18px; fill: currentColor; }
.film-ctl .ic-play, .geste-ctl .ic-play{ display: none; }
.film-ctl[aria-pressed="true"] .ic-pause, .geste-ctl[aria-pressed="true"] .ic-pause{ display: none; }
.film-ctl[aria-pressed="true"] .ic-play, .geste-ctl[aria-pressed="true"] .ic-play{ display: block; }
@media (max-width: 640px){ .film-ctl{ left: 16px; bottom: 18px; } }
/* Le produit se décale à droite ; le texte vit dans le tiers gauche, plus sombre. */
@media (min-width: 768px){ .film-video{ object-position: 72% 45%; } }
.film-veil{
background:
radial-gradient(80% 75% at 16% 45%, rgba(21,14,27,.88), rgba(21,14,27,.0) 72%),
linear-gradient(90deg, rgba(21,14,27,.92) 0%, rgba(21,14,27,.62) 40%, rgba(21,14,27,.12) 72%),
linear-gradient(180deg, rgba(21,14,27,.55) 0%, rgba(21,14,27,0) 30%, rgba(21,14,27,.72) 100%);
}
@media (max-width: 767px){
.film-video{ object-position: 50% 40%; }
.film-veil{
background:
linear-gradient(180deg, rgba(21,14,27,.72) 0%, rgba(21,14,27,.62) 45%, rgba(21,14,27,.88) 100%),
rgba(21,14,27,.18);
}
}
/* Un bandeau d'ombre sous la navigation flottante : 7,6:1 à gauche, 3,9:1 à droite
avant ; le bandeau porte la droite au-dessus de 4,5:1. */
body.has-film.on-film .site-header::before{
content: ''; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, rgba(21,14,27,.70) 0%, rgba(21,14,27,.35) 70%, rgba(21,14,27,0) 100%);
}
body.has-film.on-film .site-header{ position: sticky; }
/* ============================================================
21. Le film complet, en boîte (dialog)
============================================================ */
.film-film{ background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.75); display: inline-flex; align-items: center; gap: 8px; }
.film-film:hover{ color: #fff; }
.film-dur{ font-variant-numeric: tabular-nums; padding: 3px 8px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: 11.5px; }
.film-dialog{ border: 0; padding: 0; background: #150E1B; max-width: min(96vw, 1280px); width: 96vw; border-radius: var(--radius-lg); overflow: hidden; }
.film-dialog::backdrop{ background: rgba(21,14,27,.86); backdrop-filter: blur(6px); }
.film-full{ display: block; width: 100%; max-height: 90vh; background: #150E1B; }
.film-close{ position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(21,14,27,.6); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
@media (max-width: 767px){ .film-dialog{ width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; } .film-full{ height: 100dvh; max-height: none; object-fit: contain; } }
/* « Le geste » en deux plans sur les pages de famille. */
.geste-two{ margin-block: clamp(28px, 4vw, 56px); border-radius: var(--radius-lg); margin-inline: 0; padding: clamp(24px, 3.5vw, 48px) var(--pad-x, 24px); }
.geste-two .geste-in{ max-width: none; }
.geste-small{ aspect-ratio: 1; max-width: 220px; margin-top: 22px; }
/* ============================================================
22. Ouverture — quatre images posées l'une sur l'autre.
Chacune glisse sur la précédente depuis la droite, arrive
sombre et s'éclaire. La première, au chargement, est déjà
en place et ne fait que s'éclairer.
============================================================ */
.film-slides{ position: absolute; inset: 0; overflow: hidden; background: #150E1B; z-index: 0; isolation: isolate; }
.film .film-veil{ z-index: 1; }
.film .film-in{ z-index: 2; }
.film .slide{
position: absolute; inset: 0; margin: 0;
clip-path: inset(0 0 0 100%);
animation: slide-cover 24s linear infinite backwards;
}
.film .slide picture, .film .slide img{ display: block; width: 100%; height: 100%; }
.film .slide img{
object-fit: cover; object-position: 60% 50%;
transform-origin: 62% 50%;
animation: slide-drift 24s cubic-bezier(.22,1,.36,1) infinite backwards;
}
.film .slide::after{
content: ''; position: absolute; inset: 0; background: #150E1B; pointer-events: none;
animation: slide-light 24s ease-out infinite backwards;
}
.film .s1, .film .s1 img, .film .s1::after{ animation-delay: -1.8s; }
.film .s2, .film .s2 img, .film .s2::after{ animation-delay: 4.2s; }
.film .s3, .film .s3 img, .film .s3::after{ animation-delay: 10.2s; }
.film .s4, .film .s4 img, .film .s4::after{ animation-delay: 16.2s; }
@keyframes slide-cover{
0% { clip-path: inset(0 0 0 100%); opacity: 1; z-index: 3; }
7.5% { clip-path: inset(0 0 0 0); opacity: 1; z-index: 3; }
24.9% { clip-path: inset(0 0 0 0); opacity: 1; z-index: 3; }
25% { clip-path: inset(0 0 0 0); opacity: 1; z-index: 2; }
33% { clip-path: inset(0 0 0 0); opacity: 1; z-index: 2; }
35% { clip-path: inset(0 0 0 0); opacity: 0; z-index: 1; }
100% { clip-path: inset(0 0 0 100%); opacity: 0; z-index: 1; }
}
@keyframes slide-drift{
0% { transform: scale(1.07) translateX(3%); }
30% { transform: scale(1.02) translateX(0); }
100% { transform: scale(1.02) translateX(0); }
}
@keyframes slide-light{
0% { opacity: .9; }
8% { opacity: .82; }
28% { opacity: .04; }
100% { opacity: .04; }
}
.film.paused .slide, .film.paused .slide img, .film.paused .slide::after{ animation-play-state: paused; }
/* « Moins d'animations » (souvent activé par défaut sous Windows) :
les photos se succèdent quand même, en fondu, sans glisser ni zoomer. */
@media (prefers-reduced-motion: reduce){
.film .slide{ clip-path: none !important; opacity: 0; animation: slide-fade 24s linear infinite backwards !important; }
.film .slide.s1{ animation-delay: -1.8s !important; }
.film .slide.s2{ animation-delay: 4.2s !important; }
.film .slide.s3{ animation-delay: 10.2s !important; }
.film .slide.s4{ animation-delay: 16.2s !important; }
.film .slide img{ animation: none !important; transform: none !important; }
.film .slide::after{ animation: none !important; opacity: .08; }
}
@keyframes slide-fade{
0% { opacity: 0; }
6% { opacity: 1; }
25% { opacity: 1; }
31% { opacity: 0; }
100% { opacity: 0; }
}
/* Le texte : un titre, un bouton, un lien. Rien d'autre. */
.film-in{ padding-bottom: clamp(64px, 11vh, 132px); }
.film h1{ font-size: clamp(40px, 6.4vw, 92px); line-height: 1.0; letter-spacing: -.028em; max-width: none; }
.film h1 .italic{ display: block; font-style: normal; font-weight: 500; color: #fff; }
.film h1 .accent{ display: block; font-style: italic; font-weight: 400; color: var(--on-dark); background: none; padding: 0; }
.film .hero-ctas{ margin-top: clamp(26px, 3.4vw, 40px); align-items: center; gap: 22px; }
.film .btn-primary{ padding: 15px 26px; }
.film-link{
background: none; border: 0; padding: 8px 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500;
color: rgba(255,255,255,.86); display: inline-flex; align-items: center; gap: 10px; letter-spacing: .02em;
}
.film-link:hover{ color: #fff; }
.film-link .film-dur{ font-variant-numeric: tabular-nums; padding: 3px 9px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: 12px; }
/* Le texte s'aligne sur la marque, pas sur une colonne plus étroite. */
.film .film-in{ width: 100%; max-width: 1280px; margin-inline: auto; box-sizing: border-box; }
/* Pause : à droite, sur la ligne des boutons, loin des bulles flottantes. */
.film-ctl{ left: auto; right: clamp(20px, 4vw, 56px); bottom: calc(clamp(64px, 11vh, 132px) + 5px); }
@media (min-width: 1281px){ .film-ctl{ right: calc((100vw - 1280px) / 2 + 56px); } }
@media (max-width: 640px){
.film h1{ font-size: clamp(40px, 12vw, 52px); }
.film-in{ padding-bottom: 104px; }
.film .hero-ctas{ flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 12px 22px; }
.film .hero-ctas .btn{ width: auto; }
.film-ctl{ right: 16px; left: auto; bottom: 108px; }
}
/* ============================================================
23. En-tête : la marque, deux liens qui descendent à l'arrivée,
et les trois traits. Tout le reste vit dans le menu latéral.
============================================================ */
.site-header #searchOpenBtn,
.site-header .icon-btn[aria-label="Mon compte"],
.site-header .btn-header-cta{ display: none !important; }
.site-header .mobile-toggle{ display: inline-flex !important; }
.site-header .nav-quick{ display: flex !important; gap: clamp(18px, 2.6vw, 40px); margin-inline-start: auto; margin-inline-end: clamp(12px, 2vw, 28px); }
.site-header .nav-quick a{ font-size: 14px; font-weight: 500; letter-spacing: .06em; }
.site-header .nav{ gap: 12px; }
@keyframes drop-in{ from{ opacity: 0; transform: translateY(-26px); } to{ opacity: 1; transform: none; } }
.site-header .logo,
.site-header .nav-quick li,
.site-header .nav-actions > *{ animation: drop-in .5s cubic-bezier(.22,1,.36,1) both; }
.site-header .logo{ animation-delay: .05s; }
.site-header .nav-quick li:nth-child(1){ animation-delay: .1s; }
.site-header .nav-quick li:nth-child(2){ animation-delay: .15s; }
.site-header .nav-actions > *{ animation-delay: .2s; }
@media (prefers-reduced-motion: reduce){
.site-header .logo, .site-header .nav-quick li, .site-header .nav-actions > *{ animation: none; }
}
@media (max-width: 480px){
.site-header .logo-name{ font-size: 23px !important; }
.site-header .nav{ gap: 8px; }
.site-header .nav-quick{ gap: 14px; margin-inline-end: 4px; }
.site-header .nav-quick a{ font-size: 12.5px; letter-spacing: .03em; }
.site-header .nav-actions{ gap: 6px; }
}
/* Au téléphone, « Serrures » reste dans le menu : la marque, Commander, le panier, les trois traits. */
@media (max-width: 440px){
.site-header .nav-quick li:first-child{ display: none; }
}
/* Pas de bulle par-dessus l'ouverture. */
body.on-film .quiz-launcher-bubble{ display: none !important; }
/* Le menu latéral */
.mobile-drawer.side-menu{
inset: 0 0 0 auto; width: min(440px, 92vw); height: 100dvh;
background: #150E1B; color: var(--cream-soft);
padding: 22px clamp(24px, 3vw, 40px) 28px; gap: 0;
transform: translateX(100%); opacity: 1;
transition: transform .55s cubic-bezier(.22,1,.36,1), visibility 0s linear .55s;
box-shadow: -30px 0 80px rgba(0,0,0,.25); overflow-y: auto;
}
.mobile-drawer.side-menu.open{ transform: translateX(0); transition: transform .55s cubic-bezier(.22,1,.36,1), visibility 0s; }
.side-menu .close{ border-color: rgba(255,255,255,.3) !important; color: #fff; }
.side-main{ display: grid; gap: 4px; margin-top: clamp(28px, 6vh, 64px); }
.side-main a{
font-family: var(--serif); font-weight: 500; letter-spacing: -.015em;
font-size: clamp(30px, 4.2vh, 40px); line-height: 1.22; color: #fff; text-decoration: none;
opacity: 0; transform: translateX(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1), color .25s;
}
.side-main a:hover{ color: var(--on-dark); }
.side-menu.open .side-main a{ opacity: 1; transform: none; }
.side-menu.open .side-main a:nth-child(1){ transition-delay: .12s; }
.side-menu.open .side-main a:nth-child(2){ transition-delay: .17s; }
.side-menu.open .side-main a:nth-child(3){ transition-delay: .22s; }
.side-menu.open .side-main a:nth-child(4){ transition-delay: .27s; }
.side-menu.open .side-main a:nth-child(5){ transition-delay: .32s; }
.side-more{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: clamp(26px, 5vh, 44px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.side-more a{ color: #B9C4BC; font-size: 14px; text-decoration: none; }
.side-more a:hover{ color: #fff; }
.side-foot{ margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.side-wa{ background: var(--on-dark); color: #1E1526 !important; padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; }
.side-tel{ color: #fff !important; font-variant-numeric: tabular-nums; font-size: 14.5px; text-decoration: none; }
.side-menu .lang-switcher{ margin-inline-start: auto; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 999px; padding: 3px; display: inline-flex; }
.side-menu .lang-btn{ background: transparent !important; color: #DCE3DE !important; border: 0; border-radius: 999px; min-width: 40px; min-height: 36px; font-size: 12.5px; font-weight: 600; }
.side-menu .lang-btn.active{ background: #fff !important; color: #1E1526 !important; }
.side-scrim{ position: fixed; inset: 0; z-index: 190; background: rgba(21,14,27,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s ease; }
.side-scrim.on{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .side-main a{ opacity: 1; transform: none; transition: none; } }
/* Bandeau de confiance : des titres, plus de paragraphes. */
.trust-item .h5-like{ margin: 0; }
.trust-strip-inner{ align-items: center; }
/* La croix du menu latéral : la même à toutes les largeurs. */
.mobile-drawer.side-menu .close{ background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; }
.mobile-drawer.side-menu .close:hover{ background: rgba(255,255,255,.08) !important; }
/* Une ombre très large sous le titre : la photo la plus claire ne le rattrape jamais. */
.film h1{ text-shadow: 0 2px 36px rgba(12,8,15,.38); }
/* ============================================================
24. Accueil resserré — sept écrans, du film au pied de page.
Rien n'a disparu : ce qui était en double est fusionné, ce qui
était long passe en onglets, en rail ou en dépliant.
============================================================ */
body.home .section{ padding-block: clamp(44px, 5vw, 76px); }
body.home .section-head{ margin-bottom: clamp(18px, 2.4vw, 30px); }
body.home .section-head h2, body.home .end-faq h2, body.home .range-head h2,
body.home .shop-head h2, body.home .service h2{
font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; line-height: 1.06;
font-size: clamp(30px, 3.4vw, 46px); margin: 0;
}
body.home .section-head p{ display: none; }
/* La collection : titre, besoins en pastilles, rail, engagements sur une ligne */
.shop-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 18px; }
.shop-needs{ display: flex !important; flex-wrap: wrap; gap: 8px; }
.shop-needs .way{
flex-direction: row; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; min-height: 44px;
border-radius: 999px; text-decoration: none; color: inherit; flex: none;
}
.shop-needs .way:hover{ transform: none; border-color: var(--gold); }
.shop-needs .way-ic{ width: 34px; height: 34px; border-radius: 999px; }
.shop-needs .way-ic svg{ width: 18px; height: 18px; }
.shop-needs .way b{ font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.shop-needs .way > span:not(.way-ic){ display: none; }
body.home .carousel-rail{ padding-bottom: 20px; }
body.home .carousel-controls{ margin-top: 4px; }
.trust-line{
list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line);
display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center;
font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
}
.trust-line li{ display: inline-flex; align-items: center; gap: 8px; }
.trust-line li:not(.trust-rating)::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.trust-line .trust-rating{ margin-inline-start: auto; }
.trust-line .trust-rating a{ color: inherit; text-decoration: none; }
.trust-line .trust-rating b{ color: var(--ink); }
/* Le geste et l'application, un seul bloc */
body.home .geste-in{ grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
body.home .geste-media{ aspect-ratio: 4 / 3.4; }
.eco-list{ list-style: none; margin: 18px 0 14px; padding: 0; display: grid; gap: 10px; }
.eco-list li{ display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--ink-soft); }
.eco-list .way-ic{ width: 38px; height: 38px; flex: none; border-radius: 10px; }
.eco-list .way-ic svg{ width: 20px; height: 20px; }
body.home .geste .eco-note{ font-size: 13px; color: var(--ink-mid); margin: 0 0 20px; }
/* Gammes et portes : deux onglets */
.range-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 22px; }
.range-tabs{ display: inline-flex; padding: 4px; border-radius: 999px; background: var(--cream-warm); border: 1px solid var(--line); }
.range-tabs [role="tab"]{
appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500;
color: var(--ink-mid); padding: 0 18px; min-height: 40px; border-radius: 999px; transition: background .3s ease, color .3s ease;
}
.range-tabs [role="tab"][aria-selected="true"]{ background: var(--ink); color: var(--cream); }
.range-panel[hidden]{ display: none !important; }
body.home .families-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
body.home .family-tag{ display: none; }
body.home .family{ min-height: 0; padding: 20px 18px 18px; gap: 8px; }
body.home .family-letter{ font-size: 44px; }
body.home .family-tagline{ display: none; }
body.home .family-models li{ padding: 6px 0; font-size: 13.5px; }
body.home .rooms-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.home .room{ padding: 22px 20px; gap: 14px; }
body.home .room h3{ font-size: clamp(19px, 1.6vw, 22px); }
body.home .room-head p{ display: none; }
body.home .room-list li a{ padding: 9px 0; font-size: 13.5px; }
/* Service : quatre temps, trois liens, les promesses en dépliant */
body.home .service{ margin: 0 calc(50% - 50vw); padding-inline: var(--pad-x, 24px); }
body.home .service h2{ color: var(--cream); margin-bottom: clamp(20px, 2.6vw, 34px); }
body.home .service h2 em{ color: var(--on-dark); }
body.home .service .howto{ margin: 0; gap: 0; border-top: 1px solid rgba(255,255,255,.16); }
body.home .service .step{ background: none; border: 0; border-radius: 0; padding: 18px 20px 0 0; counter-increment: st; }
body.home .service .howto{ counter-reset: st; }
body.home .service .step b{ display: block; color: var(--cream); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
body.home .service .step b::before{ content: counter(st, decimal-leading-zero); display: block; font-family: var(--serif); color: var(--on-dark); font-size: 15px; font-weight: 500; margin-bottom: 8px; }
body.home .service .step span{ color: rgba(246,242,235,.72); font-size: 14px; }
.service-links{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(26px, 3vw, 40px); }
.service-link{
display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
padding: 16px 20px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04);
color: var(--cream) !important; text-decoration: none; text-align: start; font: inherit; cursor: pointer; min-height: 64px;
transition: background .3s ease, border-color .3s ease;
}
.service-link:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); }
.service-link b{ font-size: 15.5px; font-weight: 600; color: var(--cream); }
.service-link span{ grid-column: 1; font-size: 13px; color: rgba(246,242,235,.66); }
.service-link i{ grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 20px; color: var(--on-dark); }
body.home .service .why-grid{ margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
body.home .service .why-cell{ background: none; border: 0; border-top: 1px solid rgba(255,255,255,.14); padding: 16px 0; }
body.home .service .why-cell .num{ display: none; }
body.home .service .why-cell h3{ color: var(--cream); font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 0 0 4px; }
body.home .service .why-cell p{ color: rgba(246,242,235,.7); font-size: 13.5px; margin: 0; line-height: 1.55; }
/* Avis et poses : un rail */
body.home .reviews-section{ background: var(--cream-soft); margin-inline: calc(50% - 50vw); padding-inline: var(--pad-x, 24px); }
body.home .reviews-section > .container{ max-width: var(--max, 1280px); margin-inline: auto; }
body.home .testimonial-grid{
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); grid-template-columns: none;
gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
}
body.home .testimonial-grid::-webkit-scrollbar{ display: none; }
body.home .testimonial{ scroll-snap-align: start; padding: 22px; }
body.home .testimonial blockquote{ font-size: 16px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
body.home .google-proof{ margin-top: 20px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
body.home .google-proof .btn{ margin-top: 0; }
body.home .installations-section{ padding-block: clamp(36px, 4vw, 56px); }
/* Questions et showroom côte à côte */
.end-grid{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.end-faq h2{ margin-bottom: 18px !important; }
body.home .end-faq .faq-item:not(.faq-extra):nth-of-type(n+4){ display: none; }
body.home .end-faq.more .faq-item:not(.faq-extra):nth-of-type(n+4){ display: block; }
.end-visit{ background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; padding: 0 0 22px; }
.end-visit .map-frame{ height: 220px; min-height: 0; border-radius: 0; }
.end-visit .map-frame iframe{ width: 100%; height: 100%; min-height: 0; border: 0; display: block; filter: saturate(.8); }
.end-visit h3{ font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 20px 22px 4px; }
.end-visit .visit-meta{ margin: 0 22px 16px; color: var(--ink-mid); font-size: 14px; }
.visit-ctas{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 22px; }
.visit-ctas .btn{ flex: 1 1 auto; justify-content: center; }
.visit-lines{ margin: 14px 22px 0; font-size: 13.5px; color: var(--ink-mid); }
.visit-lines a{ color: inherit; }
/* Pied de page resserré */
body.home .site-foot{ padding-block: 44px 24px; }
body.home .foot-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
body.home .site-foot ul{ gap: 0; }
body.home .site-foot ul li{ margin: 0; }
body.home .site-foot ul a{ padding: .32rem 0; }
@media (max-width: 1100px){
body.home .families-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.home .rooms-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px){
body.home .section{ padding-block: 40px; }
.shop-needs{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad-x, 20px)); padding-inline: var(--pad-x, 20px); width: calc(100% + 2 * var(--pad-x, 20px)); }
.shop-needs::-webkit-scrollbar{ display: none; }
.trust-line{ gap: 6px 16px; font-size: 13px; }
.trust-line .trust-rating{ margin-inline-start: 0; width: 100%; }
body.home .geste-in{ grid-template-columns: 1fr; gap: 22px; }
body.home .geste-media{ aspect-ratio: 16 / 10; max-width: none; }
/* onglets : les cartes passent en rail horizontal */
body.home .families-grid, body.home .rooms-grid{
display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: calc(-1 * var(--pad-x, 20px)); padding-inline: var(--pad-x, 20px); scroll-padding-inline: var(--pad-x, 20px);
}
body.home .families-grid::-webkit-scrollbar, body.home .rooms-grid::-webkit-scrollbar{ display: none; }
body.home .family, body.home .room{ scroll-snap-align: start; }
body.home .families-grid{ grid-auto-columns: 58%; }
body.home .service .howto{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.home .service .step{ padding: 16px 12px 4px 0; }
.service-links{ grid-template-columns: 1fr; gap: 8px; }
body.home .service .why-grid{ grid-template-columns: 1fr; }
.end-grid{ grid-template-columns: 1fr; }
.end-visit .map-frame{ height: 180px; }
body.home .foot-grid{ grid-template-columns: 1fr 1fr; gap: 22px 18px; }
body.home .foot-grid > div:first-child{ grid-column: 1 / -1; }
body.home .testimonial-grid{ grid-auto-columns: 82%; margin-inline: calc(-1 * var(--pad-x, 20px)); padding-inline: var(--pad-x, 20px); }
}
@media (max-width: 520px){
body.home .service .howto{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* pied de page : les liens en ligne, pas en colonne */
body.home .foot-grid{ grid-template-columns: 1fr; gap: 18px; }
body.home .foot-grid ul{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 18px; }
body.home .foot-grid ul li{ margin: 0; font-size: 13.5px; }
body.home .foot-grid .h5-like{ margin-bottom: 4px; }
body.home .site-foot .tag{ display: none; }
body.home .foot-grid > div:first-child{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
body.home .foot-grid > div:first-child .logo{ flex-basis: 100%; }
body.home .foot-contact{ margin: 0; }
body.home .socials{ margin: 0; }
body.home .geste .eco-note{ display: none; }
body.home .foot-bottom{ gap: 10px; }
}
/* La pastille « catalogue » du pied de page garde son rembourrage (la règle des cibles tactiles l'écrasait). */
footer.site-foot .foot-contact a.foot-wa{ padding: 8px 16px; }
body.home section[id], body.home aside[id]{ scroll-margin-top: 76px; }
/* ============================================================
25. Or et prune — les détails qui font le prix.
L'or est réservé à ce qui se remarque sans se lire (filets,
puces, étoiles, point du logo) et au texte posé sur l'aubergine.
La prune porte les actions sur le papier. Une lueur prune,
jamais un aplat, donne de la profondeur aux fonds sombres.
============================================================ */
.logo .logo-name .mark{ background: var(--gilt) !important; }
.stars{ color: #B48A3E; }
.trust-line li:not(.trust-rating)::before{ background: var(--gilt); }
::selection{ background: #E9DDF0; color: var(--ink); }
/* Fonds sombres : aubergine, une lueur prune en haut, un filet d'or. */
.band-dark, body.home .service, footer.site-foot, .mobile-drawer.side-menu, .map-section{
background-color: var(--ink);
background-image:
radial-gradient(70% 90% at 85% 0%, rgba(110,62,140,.38), transparent 62%),
radial-gradient(60% 70% at 0% 100%, rgba(75,44,94,.32), transparent 65%);
}
body.home .service, footer.site-foot{ border-top: 1px solid rgba(201,168,106,.38); }
.mobile-drawer.side-menu{ border-left: 1px solid rgba(201,168,106,.28); }
.mobile-drawer.side-menu .side-more{ border-top-color: rgba(201,168,106,.25); }
.service-link{ border-color: rgba(201,168,106,.28); }
.service-link:hover{ border-color: rgba(201,168,106,.6); background: rgba(201,168,106,.06); }
/* L'ouverture : le bouton passe à l'or, la ligne italique aussi. */
.film .btn-primary{ background: var(--gilt) !important; color: var(--ink) !important; border-color: transparent !important; }
.film .btn-primary:hover{ background: #E2CB95 !important; }
.film-link .film-dur{ border-color: rgba(201,168,106,.55); color: #E2CB95; }
.film-veil{ background:
linear-gradient(180deg, rgba(21,14,27,.55) 0%, rgba(21,14,27,.10) 35%, rgba(21,14,27,.74) 100%),
radial-gradient(120% 80% at 50% 100%, rgba(52,28,69,.55), transparent 60%) !important; }
/* Onglets, pastilles : la prune sélectionne, l'or souligne. */
.range-tabs [role="tab"][aria-selected="true"]{ background: var(--gold); color: #fff; }
.shop-needs .way:hover{ border-color: var(--gilt); }
body.home .family:hover, body.home .room:hover{ border-color: var(--gilt); }
.btn-ghost:hover{ border-color: var(--gilt); }
/* ============================================================
26. Séries : des pastilles, un rail de modèles.
Une pastille mène à sa série ; chaque modèle mène à sa fiche.
============================================================ */
.fam-pills{ display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.fam-pills a{
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
border-radius: 999px; border: 1px solid var(--line); background: var(--cream-soft);
color: var(--ink-soft); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.fam-pills a small{ font-size: 11.5px; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.fam-pills a:hover{ border-color: var(--gilt); }
.fam-pills a.on{ background: var(--ink); border-color: var(--ink); color: var(--cream); }
.fam-pills a.on small{ color: var(--gilt); }
.fam-rail{
display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
padding: 2px 2px 8px; scroll-padding-inline: 2px; outline: none;
}
.fam-rail::-webkit-scrollbar{ display: none; }
.fam-rail:focus-visible{ box-shadow: 0 0 0 2px var(--gilt); border-radius: var(--radius); }
.fam-group{ display: flex; gap: 12px; flex: none; }
.fam-group + .fam-group{ padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
.fam-head{
flex: none; width: 196px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px;
padding: 18px 18px 16px; border-radius: var(--radius); text-decoration: none;
background-color: var(--ink); color: var(--cream) !important;
background-image: radial-gradient(90% 80% at 100% 0%, rgba(110,62,140,.45), transparent 65%);
transition: transform .4s var(--ease, ease);
}
.fam-head:hover{ transform: translateY(-3px); }
.fam-letter{ font-family: var(--serif); font-size: 46px; line-height: .9; color: var(--gilt); letter-spacing: -.03em; margin-bottom: 8px; }
.fam-letter-ic svg{ width: 40px; height: 40px; fill: none; stroke: var(--gilt); stroke-width: 1.5; stroke-linecap: round; }
.fam-head b{ font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--cream); }
.fam-head > span:not(.fam-letter){ font-size: 13px; color: rgba(246,242,235,.72); line-height: 1.45; }
.fam-head .fam-from{ color: var(--gilt) !important; font-weight: 500; margin-top: 2px; }
.fam-head i{ margin-top: auto; padding-top: 12px; font-style: normal; font-size: 13px; font-weight: 600; color: #E2CB95; }
.model{
flex: none; width: 168px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px;
text-decoration: none; color: var(--ink) !important;
}
.model-img{
display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
background: var(--cream-soft); border: 1px solid var(--line); margin-bottom: 8px;
transition: border-color .3s ease;
}
.model-img img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease, ease); }
.model:hover .model-img{ border-color: var(--gilt); }
.model:hover .model-img img{ transform: scale(1.04); }
.model-ic{ width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--veil); color: var(--gold); }
.model-ic svg{ width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.model b{ font-size: 15px; font-weight: 600; }
.model > span:last-child{ font-size: 13.5px; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.fam-ctl{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.fam-arrow{
width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream-soft);
display: grid; place-items: center; cursor: pointer; color: var(--ink);
}
.fam-arrow:hover{ border-color: var(--gilt); }
.fam-arrow svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 820px){
.fam-pills{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad-x, 20px)); padding-inline: var(--pad-x, 20px); }
.fam-pills::-webkit-scrollbar{ display: none; }
.fam-rail{ margin-inline: calc(-1 * var(--pad-x, 20px)); padding-inline: var(--pad-x, 20px); scroll-padding-inline: var(--pad-x, 20px); }
.fam-head{ width: 168px; padding: 16px; }
.model{ width: 142px; }
.fam-ctl{ display: none; }
}
/* WhatsApp : un seul geste, écrire. */
a.wa-launcher-btn{ display: flex; align-items: center; justify-content: center; text-decoration: none; }
.wa-bubble-link{ display: block; color: inherit !important; text-decoration: none; }
/* L'ouverture : un voile à gauche, pour le texte, quelle que soit la photo. */
.film-veil::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,14,27,.5) 0%, rgba(21,14,27,.12) 42%, transparent 62%); }
@media (max-width: 767px){ .film-veil::after{ background: linear-gradient(0deg, rgba(21,14,27,.6) 0%, rgba(21,14,27,.15) 45%, transparent 65%); } }
/* ---------- 27. Carte à la demande ----------
Google Maps ne se charge qu'au clic : la page d'accueil ne télécharge
plus ~1 Mo de scripts tiers à chaque visite. */
.end-visit .map-facade{
width:100%; height:100%; border:0; cursor:pointer; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:10px;
background: radial-gradient(120% 90% at 50% 40%, #2a1f33 0%, #1E1526 70%);
color: var(--gilt, #C9A86A); font: 500 14px/1.2 inherit; letter-spacing:.08em; text-transform:uppercase;
}
.end-visit .map-facade svg{ width:34px; height:34px; }
.end-visit .map-facade:hover span, .end-visit .map-facade:focus-visible span{ text-decoration: underline; text-underline-offset: 4px; }
.end-visit .map-facade:focus-visible{ outline: 2px solid var(--gilt, #C9A86A); outline-offset: -4px; }
/* ---------- 28. Retouches mobile (octobre) ----------
Photos produit : fond blanc plein, le cadre épouse la photo.
FAQ : cartes arrondies, texte à l'intérieur. Menu : respiration.
WhatsApp : pictogramme centré au pixel. */
.product-card .pc-img.has-real-image{ background: #fff !important; }
.pc-img img, .model-img img, .prod-card-img img, .pic img{ filter: none !important; }
.model-img{ background: #fff; }
.prod-card-img:has(img){ background: #fff; }
.pic:has(img[src*="/img/produits/"]){ background: #fff; padding: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.pic img[src*="/img/produits/"]{ width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; }
.faq-list{ gap: 10px; }
.faq-item, .faq-item:first-child{
border: 1px solid var(--line); border-radius: 18px;
padding: 0 clamp(16px, 3vw, 26px); background: var(--cream-soft); overflow: hidden;
}
.faq-q{ padding: 18px 0; font-size: clamp(16.5px, 1.5vw, 20px); line-height: 1.35; gap: 14px; }
.faq-q .plus{ width: 30px; height: 30px; }
.faq-a p{ padding-bottom: 18px; }
.side-main{ gap: clamp(10px, 1.8vh, 18px); }
.side-main a{ line-height: 1.12; font-size: clamp(28px, 3.9vh, 38px); }
.side-more{ gap: 16px 18px; }
.side-more a{ padding: 3px 0; line-height: 1.35; }
.wa-launcher-btn svg{
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 46%; height: 46%; margin: 0; display: block;
}