:root{
  --fond:#fdf9f4;
  --fond-doux:#f6efe6;
  --encre:#2a2622;
  --encre-douce:#6a6259;
  --accent:#305264;
  --accent-encre:#ffffff;
  --trait:#ece3d8;
  --accent-fonce:#24404f;
  --accent-profond:#1b3340;
  --sable:#b38f76;
  --sable-fonce:#966f54;
  --sable-texte:#8b684f;
  --sable-doux:#d8c3b2;
  --police-titre:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --police-courante:"Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --arrondi-petit:4px;
  --arrondi-moyen:10px;
  --arrondi-grand:14px;
  --arrondi-pastille:9px;
  --largeur:1200px;
  --ombre:0 12px 34px rgba(43,51,64,.1);
}
@font-face{font-family:"Cormorant Garamond";src:url("/media/eni-bijoux-mineraux/cormorant-garamond.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("/media/eni-bijoux-mineraux/jost.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;background:var(--fond-doux);color:var(--encre);
  font-family:var(--police-courante);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--police-titre);line-height:1.15;letter-spacing:-.02em;margin:0 0 .6em}
h1{font-size:clamp(1.9rem,4vw,3rem);font-weight:700}
h2{font-size:clamp(1.35rem,2.6vw,2rem);font-weight:600}
h3{font-size:1.1rem;font-weight:600}
p{margin:0 0 1em;max-width:64ch}
/* UNE LIGNE QUI NE PORTE QU'UN BOUTON N'EST PAS UN PARAGRAPHE DE TEXTE (Nils,
   2026-09-15 : « le bouton "Voir les X produits" n'est pas centré »). La
   largeur de lecture ci-dessus vaut pour de la prose ; appliquee a une ligne
   centree, elle centrait le bouton dans une colonne de 64 caracteres calee a
   gauche, et non dans la page. */
p.voir-plus,p.vers-suite,p.centre{max-width:none;text-align:center}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Le lien de saut : hors de l'ecran tant qu'il n'a pas le focus, premier arret
   de la tabulation quand il l'a. */
.saut{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-encre);padding:.7rem 1.1rem;border-radius:0 0 var(--arrondi-petit) 0;z-index:10}
.saut:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.dedans{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}

.entete{background:var(--fond);border-bottom:1px solid var(--trait);position:sticky;top:0;z-index:5}
.entete .dedans{display:flex;align-items:center;gap:1.5rem;min-height:4.2rem;flex-wrap:wrap}
.marque{font-family:var(--police-titre);font-weight:700;font-size:1.15rem;text-decoration:none;line-height:1.2}
.marque small{display:block;font-family:var(--police-courante);font-weight:400;font-size:.78rem;color:var(--encre-douce);letter-spacing:0}
.menu{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap;list-style:none;padding:0;margin-block:0}
.menu a{display:inline-block;padding:.5rem .95rem;border-radius:var(--arrondi-petit);text-decoration:none;font-size:.94rem;color:var(--encre-douce)}
.menu a:hover{background:var(--fond-doux);color:var(--encre)}
.menu a[aria-current="page"]{background:var(--accent);color:var(--accent-encre)}

.section{padding-block:clamp(2.2rem,5vw,3.6rem)}
.section+.section{padding-top:0}
.chapeau{color:var(--encre-douce);max-width:60ch}

.premier{background:var(--fond);border-radius:var(--arrondi-grand);padding:clamp(1.6rem,5vw,3.4rem);box-shadow:var(--ombre);margin-top:clamp(1.4rem,4vw,2.4rem)}

.grille{display:grid;gap:clamp(1rem,2.5vw,1.6rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));list-style:none;padding:0;margin:0}
.carte{background:var(--fond);border-radius:var(--arrondi-moyen);box-shadow:var(--ombre);overflow:hidden;display:flex;flex-direction:column}
.carte img{aspect-ratio:4/3;object-fit:cover;width:100%}
.carte .corps{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.carte h3{margin:0}
.carte a{text-decoration:none}
.carte a:hover h3{text-decoration:underline}
.carte .note{color:var(--encre-douce);font-size:.9rem;margin:0}
.prix{font-family:var(--police-titre);font-weight:700;font-size:1.15rem;margin-top:auto;padding-top:.4rem}
.sur-devis{font-weight:600;color:var(--encre-douce)}

.fiche{background:var(--fond);border-radius:var(--arrondi-grand);box-shadow:var(--ombre);padding:clamp(1.4rem,4vw,3rem);margin-top:clamp(1.4rem,4vw,2.4rem)}
.fiche .texte>:first-child{margin-top:0}
.fiche .texte ul,.fiche .texte ol{max-width:64ch}
.fiche .texte blockquote{margin:1.2em 0;padding-left:1.1rem;border-left:3px solid var(--accent);color:var(--encre-douce)}
/* LES SECTIONS D'UNE PAGE, les unes sous les autres. Un trait les separe
   plutot qu'un cadre : la fiche en porte deja un, et deux cadres imbriques ne
   disent rien de plus que le premier. L'image occupe la largeur, parce qu'une
   section sans texte EST une image, et qu'une image bridee a 300 pixels au
   milieu d'un bloc a l'air d'une erreur de chargement. */
.blocs{display:flex;flex-direction:column;gap:clamp(1.6rem,4vw,2.6rem);margin-top:clamp(1.6rem,4vw,2.6rem)}
.bloc{padding-top:clamp(1.4rem,3vw,2rem);border-top:1px solid var(--trait)}
.bloc h2{margin:0 0 .8rem}
.bloc img{display:block;width:100%;height:auto;border-radius:var(--arrondi-petit);margin-bottom:1rem}
.bloc .texte>:first-child{margin-top:0}
.retour{display:inline-block;margin-bottom:1.2rem;font-size:.92rem;color:var(--encre-douce);text-decoration:none}
.retour:hover{text-decoration:underline}
/* Le bouton d'achat d'une fiche. Il n'apparait que sur un site qui vend, et
   seulement sur une fiche qui porte un prix. */
.achat{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.8rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--trait)}
.achat .quantite{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--encre-douce)}
.achat .quantite input{width:5.5rem;padding:.6rem .7rem;border:1px solid var(--trait);border-radius:var(--arrondi-petit);font:inherit;color:var(--encre);background:var(--fond)}
.achat button{padding:.85rem 1.5rem;border:0;border-radius:var(--arrondi-pastille);background:var(--accent);color:var(--accent-encre);font:inherit;font-weight:600;cursor:pointer}
.achat button:hover{opacity:.9}

/* LE FONDU DU REMPLACEMENT EN PLACE (noyau/vitrine/script.js). Nils,
   2026-09-15 : « pas d'animation quand on clique sur un filtre, ça fait une
   saute dans l'image ». Le bloc garde sa hauteur et baisse d'un cran le temps
   que la reponse arrive : l'oeil suit, la page ne sursaute pas. Sans script,
   cette classe n'est jamais posee et ces regles ne servent jamais. */
[data-vitrine="liste"]{transition:opacity .22s ease}
[data-vitrine="liste"].chargement{opacity:.45}

/* LA MODALE D'UNE FICHE. Nils, 2026-09-15 : « les fiches produit ouvrent une
   nouvelle page au lieu d'une jolie modale ». C'est un <dialog> natif, donc
   le piege a focus, la touche Echap et le fond inerte sont tenus par le
   navigateur et non par nous. Elle n'existe QUE si le script tourne : sinon la
   fiche s'ouvre sur sa propre page, qui reste une adresse a partager. */
.modale{width:min(52rem,calc(100vw - 2rem));max-height:min(90vh,60rem);padding:0;border:0;border-radius:var(--arrondi-grand);background:var(--fond);color:var(--encre);box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:visible}
.modale::backdrop{background:rgba(20,16,12,.55);backdrop-filter:blur(2px)}
.modale[open]{animation:modale-entre .22s ease}
@keyframes modale-entre{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modale-corps{max-height:min(90vh,60rem);overflow-y:auto;overscroll-behavior:contain;padding:clamp(1.3rem,4vw,2.4rem)}
.modale-corps>:first-child{margin-top:0}
.modale-corps .fiche{background:none;box-shadow:none;border-radius:0;padding:0;margin-top:0}
.modale-corps img{border-radius:var(--arrondi-moyen)}
/* Une photo de produit fait souvent 1200 px de haut : servie telle quelle,
   elle poussait le prix et le bouton d'achat hors de la modale, et il fallait
   defiler pour commander. Elle tient donc dans la moitie de la fenetre, sans
   deformation, et ce qui decide de l'achat reste visible. */
.modale-corps img{max-height:min(42vh,26rem);width:auto;max-width:100%;margin-inline:auto;display:block;object-fit:contain}
/* La croix se pose SUR le coin et non dans le flux : sur un telephone, un
   bouton pousse en tete d'article gagne une ligne sur la photo du produit. */
.modale-fermer{position:absolute;top:.6rem;right:.6rem;z-index:2;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--fond-doux);color:var(--encre);font-size:1.05rem;line-height:1;cursor:pointer}
.modale-fermer:hover{background:var(--trait)}
body.modale-ouverte{overflow:hidden}

.vide{color:var(--encre-douce);background:var(--fond);border:1px dashed var(--trait);border-radius:var(--arrondi-moyen);padding:1.6rem;max-width:60ch}

.pied{background:var(--fond);border-top:1px solid var(--trait);margin-top:clamp(2.4rem,6vw,4rem);padding-block:2rem;color:var(--encre-douce);font-size:.92rem}
.pied p{max-width:none}
/* ---------------------------------------------------------------------------
   L'APPLICATION : CE QUE LE SCRIPT DE LA VITRINE DESSINE
   Tout ce qui suit ne sert QUE si le script de la vitrine (noyau/vitrine/
   script.js) a tourne : rideau, barre de progression, squelettes d'attente,
   bulles, tiroir du panier, suggestions de recherche, pastilles de choix. Sans
   script, aucune de ces classes n'est jamais posee et aucune de ces regles ne
   s'applique — le site reste le site d'avant, navigable de page en page. Elles
   vivent dans le NOYAU et non dans un habillage parce que c'est le noyau qui
   les pose : un habillage qui voudrait les reprendre n'a qu'a redefinir leurs
   couleurs, sa feuille etant collee apres celle-ci.
   --------------------------------------------------------------------------- */

/* LE RIDEAU. Nils, 2026-09-16 : « pas d'ecran de chargement comme dans la
   demo ». Une boutique se decouvre d'un bloc, polices posees et images en
   place, plutot que de se construire sous l'oeil ligne apres ligne. Le filet
   est dans le script : le rideau se leve au plus tard trois secondes et demie
   apres, meme si une image ne revient jamais. */
html.rideau{overflow:hidden}
html.rideau body{opacity:0}
html.rideau::before{content:"";position:fixed;inset:0;z-index:99;background:var(--fond)}
html.rideau::after{content:"";position:fixed;z-index:100;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid var(--trait);border-top-color:var(--accent);animation:tourne .7s linear infinite}
html.rideau-part body{opacity:1;transition:opacity .34s ease}
html.rideau-part::before,html.rideau-part::after{opacity:0;transition:opacity .3s ease}
@keyframes tourne{to{transform:rotate(360deg)}}

/* LA BARRE DE PROGRESSION : le seul aveu qu'une requete est partie. Elle est
   indeterminee a dessein — nous ne savons pas combien de temps le serveur
   prendra, et une barre qui pretend le savoir ment une fois sur deux. */
.progression{position:fixed;top:0;left:0;right:0;height:3px;z-index:98;opacity:0;pointer-events:none;transition:opacity .3s ease;background:linear-gradient(90deg,transparent,var(--accent) 35%,var(--accent) 65%,transparent);background-size:250% 100%}
.progression.active{opacity:1;animation:glisse 1.1s linear infinite}
@keyframes glisse{from{background-position:120% 0}to{background-position:-120% 0}}

/* LES SQUELETTES. Un rectangle a la forme de ce qui arrive vaut mieux qu'un
   vide : l'oeil sait deja ou regarder quand la reponse tombe, et la page ne
   sursaute pas au moment ou elle se remplit. */
.fantome{border:1px solid var(--trait);border-radius:var(--arrondi-moyen);background:var(--fond);padding:.9rem;overflow:hidden}
.fantome-photo{aspect-ratio:1;border-radius:var(--arrondi-petit);margin-bottom:.85rem}
.fantome-trait{height:.75rem;border-radius:999px;margin-bottom:.5rem}
.fantome-trait.court{width:45%}
.fantome-photo,.fantome-trait{background:linear-gradient(90deg,var(--fond-doux) 20%,var(--trait) 38%,var(--fond-doux) 58%);background-size:400% 100%;animation:scintille 1.5s ease infinite}
@keyframes scintille{from{background-position:100% 0}to{background-position:-60% 0}}

/* LES BULLES. Un ajout au panier doit se voir sans deplacer le regard : la
   visiteuse parcourt une grille, elle ne surveille pas l'en-tete. */
.bulles{position:fixed;z-index:60;left:50%;bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;gap:.5rem;width:min(26rem,calc(100vw - 2rem));pointer-events:none}
.bulle{background:var(--encre);color:var(--fond);border-radius:999px;padding:.7rem 1.15rem;font-size:.9rem;text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.24);animation:bulle-entre .2s ease}
.bulle-erreur{background:#8c3030}
.bulle.part{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
@keyframes bulle-entre{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* LE TIROIR DU PANIER. Un dialog natif, comme la modale : piege a focus,
   touche Echap et fond inerte tenus par le navigateur. Il glisse depuis la
   droite sur un ecran large, et remonte du bas sur un telephone — la ou le
   pouce est. */
.panneau{margin:0 0 0 auto;width:min(28rem,100vw);max-width:100vw;height:100%;max-height:100%;padding:0;border:0;background:var(--fond);color:var(--encre);box-shadow:-24px 0 60px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden}
.panneau::backdrop{background:rgba(20,16,12,.5);backdrop-filter:blur(2px)}
.panneau[open]{animation:panneau-entre .26s cubic-bezier(.2,.8,.2,1)}
@keyframes panneau-entre{from{transform:translateX(100%)}to{transform:none}}
.panneau-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.2rem;border-bottom:1px solid var(--trait)}
.panneau-tete h2{margin:0;font-size:1.15rem}
.panneau-fermer{width:40px;height:40px;border:0;border-radius:50%;background:var(--fond-doux);color:var(--encre);font-size:.95rem;line-height:1;display:grid;place-items:center;cursor:pointer}
.panneau-fermer:hover{background:var(--trait)}
.panneau-corps{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1.1rem 1.2rem}
.panneau-pied{border-top:1px solid var(--trait);background:var(--fond-doux);padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom,0px));display:grid;gap:.7rem}

.panier-lignes{display:grid;gap:.95rem}
.panier-ligne{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"photo mots retirer" "photo quantite somme";gap:.35rem .8rem;align-items:center;padding-bottom:.95rem;border-bottom:1px solid var(--trait)}
.panier-ligne:last-child{border-bottom:0;padding-bottom:0}
.panier-photo{grid-area:photo}
.panier-photo img,.panier-sans-photo{display:block;width:58px;height:58px;border-radius:12px;object-fit:cover;background:var(--fond-doux)}
.panier-mots{grid-area:mots;min-width:0}
.panier-mots b{display:block;font-size:.95rem;line-height:1.25}
.panier-detail{color:var(--encre-douce);font-size:.79rem}
.panier-quantite{grid-area:quantite;justify-self:start;display:inline-flex;align-items:center;gap:.15rem;border:1px solid var(--trait);border-radius:999px;padding:.12rem;background:var(--fond)}
.panier-quantite button{width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--encre);font-size:1rem;line-height:1;cursor:pointer}
.panier-quantite button:hover{background:var(--fond-doux)}
.panier-qte{min-width:1.5rem;text-align:center;font-size:.9rem;font-variant-numeric:tabular-nums}
.panier-somme{grid-area:somme;justify-self:end;font-weight:600;font-variant-numeric:tabular-nums}
.panier-retirer{grid-area:retirer;justify-self:end;width:28px;height:28px;border:0;background:none;color:var(--encre-douce);font-size:.8rem;cursor:pointer}
.panier-retirer:hover{color:var(--encre)}
/* Un panier vide n'est pas une panne : c'est une invitation, et elle dit par
   ou commencer. */
.panier-vide{text-align:center;color:var(--encre-douce);padding:2.6rem 1rem}
.panier-vide p{max-width:none;margin:0 0 .4rem}
.panier-total{display:flex;align-items:baseline;justify-content:space-between}
.panier-total b{font-size:1.35rem;font-variant-numeric:tabular-nums}
.panier-note{margin:0;max-width:none;font-size:.78rem;color:var(--encre-douce)}
.panier-cgv{display:flex;align-items:flex-start;gap:.55rem;font-size:.84rem;color:var(--encre-douce)}
.panier-cgv input{margin-top:.18rem;width:1.05rem;height:1.05rem;accent-color:var(--accent);flex:none}
.panier-commander{width:100%;justify-content:center;text-align:center}
.panier-commander.occupe{opacity:.6;pointer-events:none}

/* LES PASTILLES DE CHOIX remplacent le menu deroulant natif : sur un
   conditionnement, il faut voir les trois tailles ET leurs trois prix d'un
   coup d'oeil, ce qu'une liste deroulante cache par construction. Le champ
   reste un groupe de boutons radio, donc le clavier et les lecteurs d'ecran
   le lisent comme avant. */
.segment{display:grid;grid-auto-flow:column;gap:.35rem;padding:.25rem;border:1px solid var(--trait);border-radius:999px;background:var(--fond)}
.segment label{position:relative;display:grid;place-items:center;gap:.05rem;padding:.5rem .7rem;border-radius:999px;line-height:1.2;text-align:center;cursor:pointer;transition:background .18s ease,color .18s ease}
.segment label small{font-size:.72rem;color:var(--encre-douce)}
.segment input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.segment label:hover{background:var(--fond-doux)}
.segment label:has(input:checked){background:var(--accent);color:var(--accent-encre)}
.segment label:has(input:checked) small{color:inherit;opacity:.82}
.segment label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.segment-choix{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));border-radius:var(--arrondi-moyen)}
.segment-choix label{border-radius:var(--arrondi-petit)}

/* LES SUGGESTIONS DE RECHERCHE. Une liste native rend un menu gris que nous ne
   dessinons pas, qui ne sait montrer ni photo ni prix, et dont l'aspect change
   avec le navigateur. Celle-ci est a nous, et elle montre l'article. */
[data-vitrine="cherche"]{position:relative}
.suggestions{position:absolute;z-index:40;top:calc(100% + .5rem);left:0;right:0;display:none;background:var(--fond);border:1px solid var(--trait);border-radius:var(--arrondi-moyen);box-shadow:0 20px 48px rgba(0,0,0,.16);overflow:hidden}
.suggestions.ouvertes{display:block;animation:suggestions-entre .16s ease}
@keyframes suggestions-entre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.suggestion{display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;color:inherit;text-decoration:none;border-bottom:1px solid var(--trait)}
.suggestion:last-child{border-bottom:0}
.suggestion:hover,.suggestion:focus-visible{background:var(--fond-doux)}
.suggestion img,.suggestion-rond{flex:none;width:44px;height:44px;border-radius:11px;object-fit:cover;background:var(--fond-doux)}
.suggestion-mots{display:grid;min-width:0}
.suggestion-mots b{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggestion-mots small{font-size:.79rem;color:var(--encre-douce)}
.suggestion-tout{justify-content:center;background:var(--fond-doux);color:var(--accent);font-size:.85rem;font-weight:600}
.suggestion-attente{padding:.9rem;text-align:center;font-size:.86rem;color:var(--encre-douce)}

/* LES RAYONS DEPLIABLES. La hauteur est animee par le script, qui mesure le
   contenu une fois charge : une hauteur automatique ne s'anime pas, et une
   grille de produits n'a pas de hauteur connue d'avance. */
.rayon-corps{overflow:hidden;transition:height .28s cubic-bezier(.2,.8,.2,1)}

/* LE « + » D'UNE CARTE MET AU PANIER (Nils, 2026-09-16). Il doit le dire :
   sans retour, on clique deux fois sans savoir si le premier a pris. */
.plus.pris{animation:pris .45s ease}
@keyframes pris{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
[data-dedans] .plus{background:var(--accent);border-color:var(--accent);color:var(--accent-encre)}

@media (max-width:599px){
  /* Sur un telephone, le tiroir remonte du bas : c'est la que le pouce est,
     et un panneau colle a droite y coute un etirement de la main. */
  .panneau{margin:auto 0 0;width:100vw;height:auto;max-height:88vh;border-radius:var(--arrondi-grand) var(--arrondi-grand) 0 0;box-shadow:0 -20px 50px rgba(0,0,0,.24)}
  .panneau[open]{animation:panneau-monte .28s cubic-bezier(.2,.8,.2,1)}
  .segment{grid-auto-flow:row}
}
@keyframes panneau-monte{from{transform:translateY(100%)}to{transform:none}}


.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--arrondi-pastille);border:1.5px solid transparent;padding:.7rem 1.35rem;font-weight:600;font-size:.92rem;cursor:pointer;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease}
.bouton-plein{background:var(--accent);color:var(--accent-encre);border-color:var(--accent)}
.bouton-plein:hover{background:var(--accent-fonce);border-color:var(--accent-fonce)}

.entete{background:rgba(253,249,244,.94);backdrop-filter:blur(10px);z-index:60}
.entete .dedans{gap:1.25rem;min-height:4.25rem;flex-wrap:nowrap}
.entete .logo,.marque.logo{display:inline-flex;flex-direction:column;line-height:1.05;flex:none;text-decoration:none}
.logo-nom{font-family:var(--police-titre);font-size:1.35rem;color:var(--accent);font-weight:600}
.logo-sous{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sable-texte)}
.entete .menu{margin-left:.5rem}
.outils{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.tiroir{display:none;position:relative}
.tiroir summary{list-style:none;background:var(--fond-doux);border:1px solid var(--trait);border-radius:var(--arrondi-pastille);width:42px;height:42px;display:grid;place-items:center;cursor:pointer;color:var(--accent)}
.tiroir summary::-webkit-details-marker{display:none}
.tiroir nav{position:absolute;right:0;top:calc(100% + .6rem);background:var(--fond);border:1px solid var(--trait);border-radius:var(--arrondi-moyen);box-shadow:var(--ombre);padding:.5rem;min-width:14rem}
@media (max-width:900px){.large-seul{display:none}.tiroir{display:block}}

@media (max-width:900px){.scene{grid-template-columns:1fr}}
/* Le premier ecran a l'accent pour fond : un bouton clair y ecrirait en
   var(--accent) sur var(--accent), donc en invisible. */
.vignette .rond{width:44px;height:44px;border-radius:50%;background:var(--sable-doux);color:var(--accent);display:grid;place-items:center;flex:none}

@media (max-width:820px){.tete-fendue{grid-template-columns:1fr;align-items:start}}
@media (max-width:820px){.tete-fendue p{justify-self:start;text-align:left}}
@media (max-width:820px){
}

@media (max-width:820px){.engagements{grid-template-columns:repeat(2,1fr)}}
.engagement .rond{width:34px;height:34px;border-radius:50%;background:var(--sable-doux);color:var(--accent);display:grid;place-items:center;flex:none}

.piece{background:var(--fond);border:1px solid var(--trait);border-radius:var(--arrondi-moyen)}
.piece a{display:flex;flex-direction:column;height:100%;padding:.6rem .6rem .9rem;text-decoration:none;color:inherit}
.piece .photo{position:relative;display:block;border-radius:var(--arrondi-moyen);overflow:hidden;aspect-ratio:1;background:var(--sable-doux)}
.piece .photo img{width:100%;height:100%;object-fit:cover}
.piece .etiquette{position:absolute;top:.5rem;left:.5rem;display:inline-flex;align-items:center;gap:.3rem;background:rgba(253,249,244,.94);color:var(--accent);border-radius:var(--arrondi-pastille);padding:.2rem .6rem;font-size:.7rem;font-weight:600}
.piece .nom{font-family:var(--police-titre);font-weight:600;margin:.75rem .25rem .1rem}
.piece .type{margin:0 .25rem;font-size:.78rem;color:var(--encre-douce)}
.piece .bas{margin-top:auto;padding:.7rem .25rem 0;display:flex;align-items:center;justify-content:space-between}
.piece .tarif{font-family:var(--police-titre);font-weight:700;color:var(--accent);font-size:1.05rem}
.piece .bas .rond{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-encre);display:grid;place-items:center}

@media (max-width:900px){.dedans-univers,.dedans-mineraux{grid-template-columns:1fr}}
.signe .rond{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--fond);display:grid;place-items:center;font-family:var(--police-titre);font-weight:700}

@media (max-width:900px){.avis{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.avis{grid-template-columns:1fr}}

@media (max-width:820px){.promesse{grid-template-columns:1fr}}

.contact .coord .rond{width:34px;height:34px;border-radius:50%;background:var(--sable-doux);color:var(--accent);display:grid;place-items:center}

.pied{background:var(--fond)}
.colonnes{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
@media (max-width:820px){.colonnes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.colonnes{grid-template-columns:1fr;gap:1.6rem}}
.pied .mot{max-width:30ch;font-size:.88rem;margin-top:.6rem}
.pied h3{font-size:.88rem;color:var(--accent);margin-bottom:.7rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.pied a{color:var(--encre-douce);font-size:.88rem;text-decoration:none}
.pied a:hover{color:var(--accent)}
.bas-pied{border-top:1px solid var(--trait);margin-top:2rem;padding-top:1.1rem;font-size:.8rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-400-italic-latin-ext.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-400-italic-latin.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-500-italic-latin-ext.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-500-italic-latin.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-300-latin-ext.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-300-latin.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-400-latin-ext.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-400-latin.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-500-latin-ext.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-500-latin.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-600-latin-ext.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/cormorant-garamond-600-latin.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: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/jost-300-latin-ext.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: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/jost-300-latin.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: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/jost-400-latin-ext.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: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/jost-400-latin.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: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/jost-500-latin-ext.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: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/jost-500-latin.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: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/jost-600-latin-ext.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: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/jost-600-latin.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: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/tangerine-400-latin.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: 'Tangerine';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/media/eni-bijoux-mineraux/tangerine-700-latin.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;
}
:root{--clr-primary: #305264;          
  --clr-primary-dark: #24404f;
  --clr-primary-deep: #1b3340;
  --clr-secondary: #b38f76;        
  --clr-secondary-dark: #966f54;
  
  --clr-secondary-text: #8b684f;
  --clr-secondary-soft: #d8c3b2;
  --clr-bg: #fdf9f4;               
  --clr-bg-warm: #f6efe6;
  --clr-surface: #ffffff;
  --clr-ink: #2a2622;
  --clr-ink-soft: #6a6259;
  --clr-line: #ece3d8;

  --font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-script: 'Tangerine', 'Cormorant Garamond', cursive;

  --radius: 4px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 9px;
  --shadow-sm: 0 2px 10px rgba(43, 38, 34, 0.05);
  --shadow-md: 0 12px 34px rgba(43, 51, 64, 0.10);
  --shadow-lg: 0 26px 60px rgba(27, 51, 64, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1200px;
  --header-h: 66px;}
@supports (color: lch(33% 16 246)){:root{--clr-primary: lch(33% 16 246);
    --clr-primary-dark: lch(27% 15 246);
    --clr-primary-deep: lch(22% 14 246);
    --clr-secondary: lch(62% 21 62);
    --clr-secondary-dark: lch(52% 22 62);
    --clr-secondary-text: lch(47% 22 62);
    --clr-secondary-soft: lch(80% 12 62);
    --clr-bg: lch(98% 3 78);
    --clr-bg-warm: lch(95% 5 74);
    --clr-line: lch(92% 5 72);}}
*,*::before,*::after{box-sizing: border-box;}
html{scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}
body{margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--clr-ink);
  background: var(--clr-bg);
  line-height: 1.7;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;}
img{max-width: 100%; display: block;}
a{color: inherit; text-decoration: none;}
ul{list-style: none; margin: 0; padding: 0;}
h1,h2,h3,h4,h5{font-family: var(--font-head); font-weight: 500; line-height: 1.12; margin: 0; color: var(--clr-primary); letter-spacing: -0.01em;}
p{margin: 0 0 1rem;}
button{font-family: inherit; cursor: pointer;}
.container{width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.5rem);}
.eyebrow{display: inline-block;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-secondary-dark);
  margin-bottom: 1rem;}
.text-primary{color: var(--clr-primary);}
.text-secondary{color: var(--clr-secondary-dark);}
.script-font{font-family: var(--font-script); font-weight: 700; font-size: 1.5em; line-height: 0.8;}
.hl{color: var(--clr-secondary-dark); font-style: italic;}
.draft-flag{display: none;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a5b00;
  background: #fdf1dc;
  border: 1px dashed #e3b467;
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  line-height: 1.5;}
.btn{display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.95rem 1.8rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
  cursor: pointer;
  white-space: nowrap;}
.btn i,.btn svg{width: 17px; height: 17px; transition: transform 0.35s var(--ease);}
.btn:hover i,.btn:hover svg{transform: translateX(3px);}
.btn-primary{position: relative; overflow: hidden; background: var(--clr-primary); color: #fff; box-shadow: 0 10px 24px rgba(27, 51, 64, 0.22);}
.btn-primary:hover{background: var(--clr-primary-dark); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(27, 51, 64, 0.28);}
.btn-primary::after{content: "";
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-15deg);
  animation: btn-sheen 5.5s ease-in-out infinite;}
@keyframes btn-sheen{0%, 85% { left: -60%; }
  100% { left: 140%; }}
@media (prefers-reduced-motion: reduce){.btn-primary::after{display: none;}}
.btn-outline{background: transparent; border-color: var(--clr-primary); color: var(--clr-primary);}
.btn-outline:hover{background: var(--clr-primary); color: #fff; transform: translateY(-2px);}
.btn-text{background: transparent; color: var(--clr-primary); padding-left: 0.4rem; padding-right: 0.4rem;}
.btn-text:hover{color: var(--clr-secondary-dark);}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}
*{animation-duration: 0.001ms !important; transition-duration: 0.05s !important;}}
@keyframes preloader-fade-up{from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; }}
@keyframes preloader-grow{from { width: 0; } to { width: 60px; }}
#main-header{position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(253, 249, 244, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;}
#main-header nav ul{display: flex; gap: 2.1rem;}
#main-header nav a{position: relative;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--clr-ink);
  padding: 0.3rem 0;
  transition: color 0.3s;}
#main-header nav a::after{content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--clr-secondary-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);}
#main-header nav a:hover,#main-header nav a[aria-current="page"]{color: var(--clr-primary);}
#main-header nav a:hover::after,#main-header nav a[aria-current="page"]::after{transform: scaleX(1);}
.section-header{margin-bottom: 3rem;}
.section-header h2{font-size: clamp(2rem, 4.5vw, 3.1rem);}
.section-header p{color: var(--clr-ink-soft); max-width: 46ch;}
.split-header{display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;}
.split-header p{text-align: right; margin: 0;}
.hero{position: relative;
  padding: calc(var(--header-h) + clamp(1.4rem, 4vw, 3rem)) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 0%, var(--clr-bg-warm), transparent 60%),
    var(--clr-bg);}
.hero-glow{position: absolute;
  top: -18%; right: -8%;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(179, 143, 118, 0.20), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;}
.hero-layout{position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;}
.hero-content h1{font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.24;
  margin-bottom: 1.5rem;}
.hero-desc{font-size: 1.12rem; color: var(--clr-ink-soft); max-width: 46ch; margin-bottom: 2rem;}
.hero-actions{display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.2rem;}
.hero-trust{display: flex; flex-wrap: wrap; gap: 1.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--clr-line);}
.hero-trust li{display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.83rem; font-weight: 400; color: var(--clr-ink-soft);}
.hero-trust i,.hero-trust svg{width: 17px; height: 17px; color: var(--clr-secondary-dark);}
.hero-visual{position: relative;}
.hero-visual-container{position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.5;
  will-change: transform;}
.hero-img-main{width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transform-origin: 50% 58%;
  transition: transform 1.4s var(--ease);}
.hero-visual:hover .hero-img-main{transform: scale(1.09);}
.hero-img-inset{position: absolute;
  bottom: -20px; left: 16px;
  width: 34%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 5px solid var(--clr-bg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 1;
  object-fit: cover;}
.hero-chip{position: absolute;
  top: 18px; right: 18px;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--clr-primary);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);}
.hero-chip i,.hero-chip svg{width: 14px; height: 14px; color: var(--clr-secondary-dark);}
.reassurance-band{background: var(--clr-primary);
  color: rgba(255, 255, 255, 0.92);
  padding: 1.4rem 0;}
.reassurance-grid{display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;}
.reassurance-item{display: flex; align-items: center; gap: 0.85rem;}
.reassurance-item i,.reassurance-item svg{width: 26px; height: 26px; color: var(--clr-secondary-soft); flex-shrink: 0;}
.reassurance-item strong{display: block; font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; color: #fff;}
.reassurance-item span{font-size: 0.8rem; color: rgba(255, 255, 255, 0.72);}
.reassurance-item .draft-flag{color: #ffd9a0; background: rgba(255,255,255,0.08); border-color: rgba(255,217,160,0.5);}
.categories-section{padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);}
.category-grid{display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(180px, 1fr));
  gap: 1.4rem;}
.category-card{position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);}
.category-card:hover{transform: translateY(-6px); box-shadow: var(--shadow-md);}
.category-card--feature{grid-column: 1 / 3; grid-row: 1 / 3;}
.category-card--wide{grid-column: 3 / 5; grid-row: 1 / 2;}
.category-card--small-a{grid-column: 3 / 4; grid-row: 2 / 3;}
.category-card--small-b{grid-column: 4 / 5; grid-row: 2 / 3;}
.category-card--feature .category-overlay h3{font-size: 2.1rem;}
.category-card--feature .category-overlay{padding: 1.8rem;}
.category-media{position: absolute; inset: 0;}
.category-media img{width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease);}
.category-card:hover .category-media img{transform: scale(1.07);}
.category-overlay{position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.3rem;
  background: linear-gradient(to top, rgba(27, 51, 64, 0.82) 6%, rgba(27, 51, 64, 0.18) 48%, transparent 78%);}
.category-overlay h3{color: #fff; font-size: 1.5rem; margin-bottom: 0.25rem;}
.category-cta{display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);}
.category-cta i,.category-cta svg{width: 15px; height: 15px;}
.category-card:hover .category-cta{opacity: 1; transform: none;}
.about-section{padding: clamp(4rem, 8vw, 7rem) 0;
  background:
    radial-gradient(80% 60% at 10% 100%, var(--clr-bg-warm), transparent 55%),
    var(--clr-bg);}
.about-grid{display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;}
.about-visual{position: relative;}
.about-img{width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  
  object-position: 50% 38%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);}
.about-badge{position: absolute;
  bottom: 20px; right: -14px;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 500;
  color: var(--clr-primary);
  background: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);}
.about-badge i,.about-badge svg{width: 16px; height: 16px; color: var(--clr-secondary-dark);}
.about-content h2{font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1.5rem;}
.about-lead{font-size: 1.12rem; color: var(--clr-ink-soft); line-height: 1.75;}
.about-signature{display: flex; align-items: center; gap: 1.8rem; margin-top: 1.5rem; flex-wrap: wrap;}
.signature-text{font-family: var(--font-script); font-weight: 700; font-size: 3.2rem; color: var(--clr-secondary-dark); line-height: 0.7;}
.intention-section{padding: clamp(3.5rem, 7vw, 5.5rem) 0;}
.intention-index{max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid var(--clr-line);}
.intention-row{position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 4vw, 2.4rem);
  padding: clamp(1.5rem, 4vw, 2.2rem) 0.3rem;
  border-bottom: 1px solid var(--clr-line);
  overflow: hidden;}
.intention-row::after{content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);}
.intention-row:hover::after{transform: scaleX(1);}
.intention-num{font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--clr-line);
  line-height: 1;
  min-width: 2.2ch;
  transition: color 0.4s var(--ease);}
.intention-row:hover .intention-num{color: var(--clr-secondary-soft);}
.intention-row-body{flex: 1; transition: transform 0.4s var(--ease);}
.intention-row:hover .intention-row-body{transform: translateX(8px);}
.intention-row-body h3{display: flex; align-items: center; gap: 0.7rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin-bottom: 0.3rem;}
.intention-row-body p{font-size: 0.9rem; color: var(--clr-ink-soft); margin: 0; max-width: 52ch;}
.intention-badge{font-family: var(--font-body);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clr-secondary-dark);
  background: var(--clr-bg-warm);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;}
@media (max-width: 640px){.intention-row{gap: 1rem;}}
.minerals-section{padding: clamp(4rem, 8vw, 7rem) 0;
  background:
    radial-gradient(70% 80% at 100% 0%, var(--clr-bg-warm), transparent 55%),
    var(--clr-bg);}
.mineral-feature{display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;}
.mineral-img-container{border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5 / 4;}
.mineral-img{width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease);}
.mineral-img-container:hover .mineral-img{transform: scale(1.05);}
.mineral-content h2{font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.3rem;}
.mineral-content p{color: var(--clr-ink-soft); font-size: 1.05rem;}
.mineral-tags{display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem;}
.mineral-tags span{font-size: 0.78rem; font-weight: 400;
  color: var(--clr-primary);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;}
.social-proof-section{padding: clamp(3.5rem, 7vw, 6rem) 0;}
.testimonials{display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-bottom: 3.5rem;}
.testimonial-card{position: relative;
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.7rem;
  margin: 0;
  box-shadow: var(--shadow-sm);}
.testimonial-stars{display: flex; gap: 0.15rem; margin-bottom: 0.9rem;}
.testimonial-stars i,.testimonial-stars svg{width: 16px; height: 16px; color: var(--clr-secondary); fill: var(--clr-secondary);}
.testimonial-card blockquote{font-family: var(--font-head);
  font-size: 1.16rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--clr-ink);
  margin: 0 0 1.1rem;}
.testimonial-card figcaption{font-size: 0.86rem; font-weight: 500; color: var(--clr-primary);}
.testimonial-card figcaption span{display: block; font-weight: 300; font-size: 0.76rem; color: var(--clr-ink-soft); margin-top: 2px;}
.testimonial-card .draft-flag{position: absolute; top: 12px; right: 12px; margin: 0;}
.practitioner-section{padding: clamp(3.5rem, 7vw, 6rem) 0;
  background:
    radial-gradient(90% 120% at 100% 0%, var(--clr-primary-dark), transparent 60%),
    var(--clr-primary);
  color: #fff;}
.practitioner-grid{display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;}
.practitioner-content .eyebrow{color: var(--clr-secondary-soft);}
.practitioner-content h2{color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.2rem;}
.practitioner-content h2 .script-font{color: var(--clr-secondary-soft);}
.practitioner-content p{color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; margin-bottom: 1.8rem;}
.practitioner-card{background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem;
  backdrop-filter: blur(6px);}
.practitioner-card h3{color: #fff; font-size: 1.3rem; margin-bottom: 1.2rem;}
.practitioner-card ul{display: flex; flex-direction: column; gap: 1rem;}
.practitioner-card li{display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.86);}
.practitioner-card i,.practitioner-card svg{width: 19px; height: 19px; color: var(--clr-secondary-soft); flex-shrink: 0; margin-top: 2px;}
.practitioner-card .draft-flag{color: #ffd9a0; background: rgba(255,255,255,0.08); border-color: rgba(255,217,160,0.5);}
.practitioner-section .offer-grid{margin-top: clamp(2.5rem, 5vw, 3.5rem);}
.offer-header-clair{text-align: center; margin-top: clamp(3rem, 6vw, 4.5rem);}
.offer-header-clair .eyebrow{color: var(--clr-secondary-soft);}
.offer-header-clair h2{color: #fff;}
.offer-header-clair h2 .script-font{color: var(--clr-secondary-soft);}
.promise-section{padding: clamp(3.5rem, 7vw, 6rem) 0;}
.promise-grid{display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;}
.promise-card{position: relative;
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.9rem 2rem;
  overflow: hidden;}
.promise-num{font-family: var(--font-head);
  font-size: 3.4rem;
  font-weight: 600;
  color: var(--clr-secondary-soft);
  line-height: 1;
  display: block;
  margin-bottom: 0.8rem;}
.promise-card h3{font-size: 1.5rem; margin-bottom: 0.6rem;}
.promise-card p{font-size: 0.92rem; color: var(--clr-ink-soft); margin: 0;}
.cta-final{padding: clamp(4rem, 9vw, 7rem) 0;
  text-align: center;
  background:
    radial-gradient(60% 90% at 50% 0%, var(--clr-bg-warm), transparent 60%),
    var(--clr-bg);}
.cta-final h2{font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin-bottom: 1rem;}
.cta-final > .container > p{max-width: 52ch; margin: 0 auto 2rem; color: var(--clr-ink-soft); font-size: 1.08rem;}
.contact-methods{display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2.2rem;}
.contact-method{display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.92rem; font-weight: 400;
  color: var(--clr-primary);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.3rem;
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;}
.contact-method:hover{border-color: var(--clr-secondary); transform: translateY(-2px); box-shadow: var(--shadow-sm);}
.contact-method i,.contact-method svg{width: 18px; height: 18px; color: var(--clr-secondary-dark);}
footer{background: var(--clr-primary-deep); color: rgba(255, 255, 255, 0.72); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;}
.offer-grid{display: grid;
  grid-template-columns: repeat(4, 1fr);
  
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
  gap: 1.6rem;
  margin-top: 1rem;}
.offer-card.offer-card-signature{grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-areas:
    "badge cote"
    "titre cote"
    "desc  cote";
  column-gap: clamp(2rem, 4vw, 3.4rem);
  align-content: start;}
.offer-card-signature .offer-badge{grid-area: badge;}
.offer-card-signature h3{grid-area: titre;}
.offer-card-signature .offer-desc{grid-area: desc; margin-bottom: 0; padding-bottom: 0;}
.offer-signature-cote{grid-area: cote;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(1.4rem, 3vw, 2.4rem);
  border-left: 1px solid var(--clr-line);}
.offer-signature-cote .offer-features{margin-top: 1.6rem;}
.offer-card-signature:hover{transform: none; box-shadow: var(--shadow-md);}
.offer-card{position: relative;
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.9rem;
  display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);}
.offer-card:hover{transform: translateY(-6px); box-shadow: var(--shadow-md);}
.offer-card-highlight{border-color: var(--clr-secondary); box-shadow: var(--shadow-md);}
.offer-badge{display: inline-block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-secondary-dark); margin-bottom: 0.9rem;}
.offer-card h3{font-size: 1.7rem; margin-bottom: 0.7rem;}
.offer-desc{font-size: 0.9rem; color: var(--clr-ink-soft); margin-bottom: auto; padding-bottom: 1.3rem;}
.offer-price{display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem;}
.offer-price-new{font-family: var(--font-head); font-size: 1.9rem; font-weight: 600; color: var(--clr-primary);}
.offer-price-duration{font-size: 0.85rem; color: var(--clr-ink-soft);}
.offer-features{display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.4rem;}
.offer-features li{display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--clr-ink-soft);}
.offer-features i,.offer-features svg{width: 16px; height: 16px; color: var(--clr-secondary-dark);}
.avant-seance{margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: clamp(1.7rem, 3.4vw, 2.5rem) clamp(1.4rem, 3vw, 2.3rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 140% at 100% 0%, var(--clr-primary-dark), transparent 62%),
    var(--clr-primary);
  color: #fff;
  box-shadow: var(--shadow-md);}
.avant-seance-titre{font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 600;
  color: #fff;
  margin: 0 0 clamp(1.3rem, 2.6vw, 1.9rem);}
.avant-seance-liste{display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.3rem, 2.6vw, 2.1rem);
  margin: 0;
  padding: 0;
  list-style: none;}
.avant-seance-liste li{display: flex; align-items: flex-start; gap: 0.75rem;}
.avant-seance-liste li > div{display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;}
.avant-seance-liste i,.avant-seance-liste svg{width: 20px; height: 20px;
  flex: none;
  margin-top: 0.15rem;
  color: var(--clr-secondary-soft);}
.avant-seance-liste b{font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;}
.avant-seance-liste span{font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);}
.zone-infos-clair .avant-seance{background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  color: var(--clr-ink);}
.zone-infos-clair .avant-seance-titre,.zone-infos-clair .avant-seance-liste b{color: var(--clr-ink);}
.zone-infos-clair .avant-seance-liste span{color: var(--clr-ink-soft);}
.zone-infos-clair .avant-seance-liste i,.zone-infos-clair .avant-seance-liste svg{color: var(--clr-secondary-dark);}
@media (max-width: 1000px){.avant-seance-liste{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 600px){.avant-seance-liste{grid-template-columns: 1fr; gap: 1.2rem;}}
@media (max-width: 1180px){.offer-grid{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 900px){#main-header nav{position: fixed;
    top: var(--header-h); left: 0; right: 0;
    max-height: 0;
    overflow: hidden;
    
    background: var(--clr-bg);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    opacity: 0;
    transition: max-height 0.45s var(--ease), opacity 0.25s ease, box-shadow 0.4s;}
#main-header nav ul{flex-direction: column; gap: 0; padding: 0.4rem clamp(1.2rem, 4vw, 2.5rem) 1.5rem;}
#main-header nav li{opacity: 0;
    transform: translateY(-9px);
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);}
#main-header nav li + li{border-top: 1px solid var(--clr-line);}
#main-header nav a{display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.02rem 0.15rem;
    font-family: var(--font-head);
    font-size: 1.24rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.3s, padding-left 0.35s var(--ease);}
#main-header nav a:hover,#main-header nav a:focus-visible{padding-left: 0.55rem;}
#main-header nav a::after{left: auto; right: 0.3rem; bottom: auto; top: 50%;
    width: 7px; height: 7px;
    background: none;
    border-top: 1.5px solid var(--clr-secondary-dark);
    border-right: 1.5px solid var(--clr-secondary-dark);
    opacity: 0.4;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.35s var(--ease), opacity 0.3s;}
#main-header nav a:hover::after,#main-header nav a:focus-visible::after,#main-header nav a[aria-current="page"]::after{opacity: 1;
    transform: translateY(-50%) translateX(4px) rotate(45deg);}
@media (prefers-reduced-motion: reduce){#main-header nav, #main-header nav li, #main-header nav a, #main-header nav a::after { transition: none; }
    #main-header nav li { opacity: 1; transform: none; }}
.hero{padding: calc(var(--header-h) + 1.4rem) 0 2.8rem;}
.hero-layout{display: flex;
    flex-direction: column;
    gap: 0;
    text-align: center;}
.hero-content{display: contents;}
.hero-content .eyebrow{order: 1;}
.hero-visual{order: 2; max-width: 420px; margin: 1.3rem auto 2.6rem; width: 100%;}
.hero-content h1{order: 3;}
.hero-desc{order: 4;}
.hero-actions{order: 5;}
.hero-content .hero-trust{order: 6;}
.hero-img-inset{left: 14px; bottom: -20px; width: 34%;}
.hero-desc,.hero-content .hero-trust{margin-left: auto; margin-right: auto;}
.hero-actions{flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    width: 100%;
    max-width: 320px;
    margin-left: auto; margin-right: auto;}
.hero-actions .btn{justify-content: center;}
.hero-trust{justify-content: center; gap: 0.9rem 1.3rem;}
.about-grid,.mineral-feature,.practitioner-grid{grid-template-columns: 1fr; gap: 2.5rem;}
.about-visual,.mineral-img-container{max-width: 520px;}
.category-grid{grid-template-columns: repeat(2, 1fr); grid-template-rows: none;}
.category-card{aspect-ratio: 3 / 4;}
.category-card--feature,.category-card--wide,.category-card--small-a,.category-card--small-b{grid-column: auto; grid-row: auto;}
.reassurance-grid{grid-template-columns: repeat(2, 1fr); gap: 1.2rem;}
.testimonials{grid-template-columns: 1fr;}
.promise-grid{grid-template-columns: 1fr;}
.offer-grid{grid-template-columns: 1fr; grid-auto-rows: auto;}
.offer-card.offer-card-signature{display: flex; flex-direction: column;}
.offer-card-signature .offer-desc{margin-bottom: auto; padding-bottom: 1.3rem;}
.offer-signature-cote{padding-left: 0; border-left: 0;}
.section-header{text-align: center;}
.section-header p{margin-left: auto; margin-right: auto;}
.split-header{flex-direction: column; align-items: center; gap: 0.8rem; text-align: center;}
.split-header p{text-align: center;}
.cta-final{padding: clamp(3.4rem, 8vw, 5rem) 0;}
.cta-final h2{font-size: clamp(1.9rem, 6.4vw, 2.8rem);}
.contact-methods{flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin-left: auto; margin-right: auto;
    gap: 0.7rem;}
.contact-method{justify-content: center;}
.cta-final .btn-primary{display: inline-flex;}
footer{padding-bottom: 6rem;}}
@media (max-width: 560px){body{font-size: 16px;}
.category-grid{grid-template-columns: 1fr 1fr; gap: 0.9rem;}}
:root{--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  
  --shadow-card:
    0 1px 2px rgba(43, 51, 64, 0.04),
    0 4px 12px rgba(43, 51, 64, 0.05),
    0 14px 34px rgba(43, 51, 64, 0.05);
  --shadow-card-hover:
    0 2px 4px rgba(43, 51, 64, 0.05),
    0 10px 24px rgba(43, 51, 64, 0.08),
    0 30px 60px rgba(27, 51, 64, 0.11);}
body::after{content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.035;
  mix-blend-mode: multiply;}
.testimonial-card{box-shadow: var(--shadow-card);}
.category-card{box-shadow: var(--shadow-card);}
.category-card:hover{box-shadow: var(--shadow-card-hover);}
.intention-section,.social-proof-section{position: relative;
  background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-warm) 22%, var(--clr-bg-warm) 78%, var(--clr-bg) 100%);}
.intention-section::before,.social-proof-section::before,.intention-section::after,.social-proof-section::after{content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-line) 22%, var(--clr-line) 78%, transparent);}
.intention-section::before,.social-proof-section::before{top: 0;}
.intention-section::after,.social-proof-section::after{bottom: 0;}
.reassurance-band{position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 180% at 12% 0%, rgba(179, 143, 118, 0.20), transparent 58%),
    linear-gradient(180deg, var(--clr-primary), var(--clr-primary-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.14);}
.reassurance-band::after{content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  pointer-events: none;}
.reassurance-item i,.reassurance-item svg{position: relative;}
.testimonial-card{position: relative; overflow: hidden;}
.testimonial-card::before{content: "\201C";
  position: absolute;
  right: 0.8rem; top: 0.1rem;
  font-family: var(--font-head);
  font-size: 5.4rem;
  line-height: 1;
  color: var(--clr-secondary);
  opacity: 0.09;
  pointer-events: none;}
h1,h2,h3{text-wrap: balance;}
p,blockquote{text-wrap: pretty;}
::selection{background: var(--clr-secondary-soft); color: var(--clr-primary-deep);}
:focus-visible{outline: 2px solid var(--clr-secondary-dark);
  outline-offset: 3px;
  border-radius: var(--radius);}
.btn:active{transform: translateY(0) scale(0.98);}
.about-frame{overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);}
.about-frame .about-img{border-radius: 0;
  box-shadow: none;
  transform: scale(1.12);
  transform-origin: 50% 68%;
  transition: transform 1.2s var(--ease);}
.about-visual:hover .about-frame .about-img{transform: scale(1.16);}
@supports (-webkit-background-clip: text) or (background-clip: text){.hero .hl{background: linear-gradient(100deg,
      var(--clr-secondary-dark) 42%, #e6d2bf 50%, var(--clr-secondary-dark) 58%);
    background-size: 320% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: hl-shine 2.4s var(--ease) 1.9s 1;}}
@keyframes hl-shine{from { background-position: 100% 0; } to { background-position: -40% 0; }}
@keyframes cart-bump{0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  60% { transform: scale(0.92); }
  100% { transform: scale(1); }}
.hero-glow{transition: transform 1.1s var(--ease); will-change: transform;}
@media (prefers-reduced-motion: reduce){.hero .hl{animation: none; background: none; color: var(--clr-secondary-dark);
    -webkit-text-fill-color: currentColor;}}