/* ==========================================================================
   THE FACE INSTITUT — IDENTITÉ « GRIS BLEUTÉ »
   --------------------------------------------------------------------------
   Refonte visuelle seule, d'après l'image de référence fournie par la cliente.
   Aucune fonctionnalité, page, donnée, lien, réservation Planity, compte
   cliente, avis ni fidélité n'est modifié : cette feuille est chargée APRÈS
   style.css et ne redéfinit que l'apparence.

   Ce que dit la référence
     · des cartes qui flottent et se chevauchent, jamais une grille sage
     · deux familles de cartes : l'une claire, l'autre en dégradé brun
     · de grands arrondis, des ombres douces, beaucoup de vide
     · un titre didone éditorial, un sur-titre minuscule au-dessus
     · une palette entièrement grise, relevée sur la photographie de l'institut
       fournie par la cliente : mur #DAE0EC, sol #CAD0D9, tenue #838CA8. Ce sont
       des gris bleutés. Le fond est volontairement plus soutenu que le blanc
       cassé précédent — la cliente voulait un gris qui se voie.
   ========================================================================== */

/* ==========================================================================
   1. PALETTE
   --------------------------------------------------------------------------
   On garde les jetons historiques : toute la feuille d'origine s'y réfère,
   la refonte se propage donc d'un seul coup. On les réchauffe d'un cran et
   on ajoute la famille « carte brune » de la référence.
   ========================================================================== */
:root{
  --perle:      #E3E7EE;   /* gris perle très clair — fond principal */
  --gris-clair: #D9DEE7;   /* gris clair — sections secondaires */
  --gris-moyen: #99A1B2;   /* gris moyen — filets, éléments secondaires */
  --anthracite: #333A47;   /* gris anthracite — textes */
  --encre:      #232936;   /* gris le plus foncé, par touches */
  --blanc-casse:#F4F6F9;   /* blanc cassé — contraste seul */

  /* Remap des jetons d'origine */
  --ivory:      #EDF0F5;
  --cream:      #E3E7EE;
  --sand:       #D9DEE7;
  --beige:      #C8CEDB;
  --taupe:      #99A1B2;
  --clay:       #DFE3EB;
  --gold:       #7E8798;
  --gold-soft:  #AEB5C4;
  --espresso:   #232936;
  --ink:        #1B202B;
  --muted:      #6A7183;
  --line:       rgba(45,52,66,.20);
  --line-soft:  rgba(45,52,66,.10);

  /* La carte sombre de la référence, en un seul jeton. */
  --carte-sombre: linear-gradient(152deg, #2A3040 0%, #3A4254 38%, #5A6478 74%, #7B8598 100%);
  --carte-claire: linear-gradient(160deg, #FAFBFD 0%, #EDF0F5 100%);

  /* Formes : les grands arrondis de la référence. */
  --radius:      18px;
  --radius-lg:   28px;
  --radius-xl:   36px;
  --radius-carte:32px;

  /* Ombres : profondes mais très diffuses, teintées de brun. */
  --shadow:         0 40px 90px -50px rgba(45,52,66,.55);
  --shadow-lg:      0 60px 120px -55px rgba(45,52,66,.6);
  --shadow-warm:    0 34px 80px -46px rgba(45,52,66,.45);
  --shadow-warm-lg: 0 56px 110px -50px rgba(45,52,66,.55);
  --shadow-carte:   0 44px 90px -46px rgba(45,52,66,.42), 0 4px 14px -8px rgba(45,52,66,.18);

  /* Typographie */
  --font-serif:   "Cormorant Garamond", "Didot", Georgia, serif;
  --font-display: "Bodoni Moda", "Didot", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Jost", "Futura", "Avenir Next", "Helvetica Neue", sans-serif;

  --head-h: 84px;
  --sect:   clamp(88px, 11vw, 170px);
}

html{ background:var(--perle); overflow-x:clip; }
body{ overflow-x:clip; }
body{ background:var(--perle); color:var(--espresso); }
::selection{ background:var(--beige); color:var(--ink); }

/* ==========================================================================
   2. TYPOGRAPHIE
   --------------------------------------------------------------------------
   Trois voix, comme dans la référence : un didone pour les titres, le
   Cormorant italique pour les mots que l'on veut faire chanter, le Jost
   pour les textes courants et les boutons.
   ========================================================================== */
h1, h2,
.hero__titre,
.quote blockquote,
.modal__title, .review__title, .compte__titre,
.uni__title, .carte__nom, .temoins__titre{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.02em;
}
h3, h4, .tech h3, .offre h3, .cat__head, .espace__h3, .footer__name{
  font-family:var(--font-display); font-weight:400; letter-spacing:-.012em;
}
h1 em, h2 em, h3 em,
.hero__titre em, .quote blockquote em, .section__lede em{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  letter-spacing:0; color:var(--gold);
}
h2{ font-size:clamp(2.4rem, 5.2vw, 4.4rem); line-height:1.03; }

/* Le sur-titre de la référence : minuscule, très espacé, sans filet. */
.eyebrow{
  font-family:var(--font-sans);
  font-size:10.5px; letter-spacing:.4em; font-weight:400;
  color:var(--gold);
}

p, li, .lede, .section__lede{ font-family:var(--font-sans); }
.lede, .section__lede{ color:var(--muted); font-weight:300; }

/* ==========================================================================
   3. DÉCOR AU TRAIT
   --------------------------------------------------------------------------
   Posé par js/deco.js : de très grandes illustrations, très pâles, brunes,
   libres de déborder de leur section. Elles apportent la note « studio »
   sans jamais concurrencer les photographies.
   ========================================================================== */
.section, .hero, .quote, .footer, .univers, .maison, .offres,
.prestations, .technologies, .galerie, .avis, .fidelite, .infos{
  position:relative;
}
.deco{
  position:absolute; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:0; transition:opacity 1.8s cubic-bezier(.25,.46,.45,.94);
  filter:none;
  will-change:transform;
}
.deco.is-on{ opacity:var(--deco-op, .16); }
.deco--visage   { background-image:url("../assets/lineart/visage.svg"); }
.deco--feuillage{ background-image:url("../assets/lineart/feuillage.svg"); }
.deco--ondes    { background-image:url("../assets/lineart/ondes.svg"); }
.deco--petales  { background-image:url("../assets/lineart/petales.svg"); }
.deco--arcs     { background-image:url("../assets/lineart/arcs.svg"); }
.deco--goutte   { background-image:url("../assets/lineart/goutte.svg"); }

@keyframes decoRespire{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%    { transform:translate3d(0,-16px,0) rotate(.6deg); }
}
.deco--anime{ animation:decoRespire 20s ease-in-out infinite; }
.deco--lent { animation-duration:30s; }

.container,
.footer__grid, .footer__nav, .footer__bar{ position:relative; z-index:1; }
/* .hero__panel et .hero__media sont positionnés en absolu par style.css :
   on ne leur donne qu'un rang, jamais un position. */
.hero__panel{ z-index:3; }
.hero__media{ z-index:1; }

@media (prefers-reduced-motion:reduce){
  .deco{ animation:none !important; transition:none; }
}

/* ==========================================================================
   4. LA CARTE FLOTTANTE — la brique de la référence
   --------------------------------------------------------------------------
   Deux familles, jamais mélangées dans un même bloc : la claire, presque
   blanche mais toujours crémeuse, et la brune en dégradé. Grand arrondi,
   ombre large et diffuse, filet clair sur le bord haut pour l'effet de
   relief.
   ========================================================================== */
.carte-flottante{
  border-radius:var(--radius-carte);
  box-shadow:var(--shadow-carte);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .8s var(--ease-out, cubic-bezier(.25,.46,.45,.94)),
             box-shadow .8s var(--ease-out, cubic-bezier(.25,.46,.45,.94));
}
.carte-flottante--claire{
  background:var(--carte-claire);
  color:var(--espresso);
  box-shadow:var(--shadow-carte), inset 0 1px 0 rgba(255,255,255,.9);
}
.carte-flottante--sombre{
  background:var(--carte-sombre);
  color:#F4F6F9;
}
.carte-flottante--sombre h2,
.carte-flottante--sombre h3,
.carte-flottante--sombre .uni__title{ color:#F4F6F9; }
.carte-flottante--sombre p,
.carte-flottante--sombre .uni__desc{ color:rgba(244,246,249,.82); }
.carte-flottante--sombre .eyebrow{ color:rgba(244,246,249,.7); }

/* ==========================================================================
   5. BANDEAU ET HEADER
   ========================================================================== */
.announce{
  background:linear-gradient(100deg, #232936 0%, #2E3444 52%, #4B5468 100%) !important;
  border-bottom:0;
  font-size:10px; letter-spacing:.24em;
}
.announce::after{ display:none; }

.header{
  background:rgba(227,231,238,.78);
  backdrop-filter:saturate(150%) blur(18px);
  -webkit-backdrop-filter:saturate(150%) blur(18px);
  border-bottom:1px solid var(--line-soft);
}
.header.is-scrolled{ box-shadow:0 1px 34px rgba(45,52,66,.09); }
.header__inner{ max-width:1440px; margin-inline:auto; padding-inline:var(--gutter); min-height:var(--head-h); }
.brand__name{ color:var(--ink); letter-spacing:.36em; font-size:14px; }
.brand__sub{ color:var(--gold); }
.nav a{ color:var(--espresso); font-size:10.5px; letter-spacing:.2em; }
.nav a:not(.nav__cta)::after{ background:var(--gold); }

/* Navigation dépliée à partir de 1100 px — en dessous, le panneau déroulant
   d'origine est conservé tel quel. */
@media (min-width:1100px){
  .burger{ display:none !important; }
  .nav{
    position:static !important; inset:auto !important;
    width:auto !important; max-height:none !important; overflow:visible !important;
    flex-direction:row !important; align-items:center !important;
    gap:clamp(13px,1.5vw,24px) !important; padding:0 !important;
    background:none !important; border:0 !important; box-shadow:none !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    opacity:1 !important; visibility:visible !important;
    transform:none !important; clip-path:none !important;
    margin-left:auto;
  }
  .nav__bec, .nav__aside{ display:none !important; }
  .nav a{ border:0 !important; padding:8px 0 !important; }
  .nav a .fleche-menu{ display:none !important; }
  .nav__cta{
    margin-left:clamp(8px,1.2vw,18px);
    flex:none; white-space:nowrap;
    background:var(--carte-sombre); color:#F4F6F9 !important;
    padding:15px 28px !important; border:0 !important;
    border-radius:999px !important;
    box-shadow:0 16px 34px -20px rgba(45,52,66,.6);
    transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  }
  .nav__cta:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -20px rgba(45,52,66,.7); }
}

/* ==========================================================================
   6. BOUTONS — la gélule fine de la référence
   ========================================================================== */
.btn-solid, .btn-line, .btn-ghost, .btn-book, .btn-ajout,
.btn-solid--clair, .btn-line--sm, .btn-line--full, .btn-solid--full, .fab{
  border-radius:999px !important;
  font-family:var(--font-sans);
  letter-spacing:.2em; text-transform:uppercase; font-size:10.5px;
}
.btn-solid, .btn-solid--full{
  background:var(--carte-sombre); color:#F4F6F9; border:0;
  box-shadow:0 18px 40px -24px rgba(45,52,66,.55);
  padding:17px 34px;
}
.btn-solid:hover, .btn-solid--full:hover{
  background:var(--carte-sombre); color:#F4F6F9;
  transform:translateY(-2px);
  box-shadow:0 26px 50px -24px rgba(45,52,66,.65);
}
.btn-solid--clair{
  background:#FAFBFD; color:var(--espresso);
  border:0; box-shadow:0 18px 40px -24px rgba(45,52,66,.4);
}
.btn-solid--clair:hover{ background:#FAFBFD; color:var(--espresso); }
.btn-solid::before, .btn-line::before, .btn-ghost::before, .btn-book::before{ display:none !important; }

.btn-line, .btn-book, .btn-line--sm, .btn-line--full, .btn-ghost, .btn-ajout{
  background:transparent; color:var(--espresso); border:1px solid var(--line);
}
.btn-line:hover, .btn-book:hover, .btn-line--sm:hover,
.btn-line--full:hover, .btn-ajout:hover{
  background:var(--espresso); border-color:var(--espresso); color:#F4F6F9;
}
.carte-flottante--sombre .btn-line,
.carte-flottante--sombre .btn-book{
  border-color:rgba(244,246,249,.42); color:#F4F6F9;
}
.carte-flottante--sombre .btn-line:hover,
.carte-flottante--sombre .btn-book:hover{
  background:#F4F6F9; color:var(--brun-f); border-color:#F4F6F9;
}
.fab{
  background:var(--carte-sombre) !important; color:#F4F6F9 !important;
  border:0 !important; box-shadow:0 20px 44px -24px rgba(45,52,66,.7) !important;
  padding:16px 28px;
}
.fab__dot{ background:#C2C8D4 !important; }

/* ==========================================================================
   7. HERO — une grande carte posée sur la page
   --------------------------------------------------------------------------
   La photographie garde la luminosité demandée. Ce qui change, c'est la
   forme : la bannière se détache de ses quatre bords et devient un objet
   arrondi, sur lequel le bloc des chiffres clés vient mordre par le bas.
   ========================================================================== */
.hero{
  margin:clamp(8px,1.4vw,18px) clamp(10px,2.4vw,38px) 0;
  border-radius:var(--radius-xl) !important;
  overflow:hidden;
  height:calc(100svh - var(--head-h) - 34px);
  min-height:560px;
}
@media (min-width:900px){
  .hero{
    margin-inline:clamp(10px,2.4vw,38px);
    border-radius:var(--radius-xl) !important;
    height:calc(100svh - var(--head-h) - 34px);
  }
}
/* Le halo clair sous le texte : il éclaircit, il n'assombrit jamais. */
.hero__media::after{
  background:
    radial-gradient(76% 60% at 8% 92%,
                    rgba(244,246,249,.86) 0%,
                    rgba(244,246,249,.56) 34%,
                    rgba(244,246,249,.20) 62%,
                    rgba(244,246,249,0)   82%),
    linear-gradient(to top, rgba(205,211,223,.24), rgba(205,211,223,0) 56%) !important;
}
.hero__titre{ font-size:clamp(2.5rem, 5.6vw, 4.8rem); }
.hero__soustitre{ font-family:var(--font-sans); letter-spacing:.02em; }

/* ==========================================================================
   8. CHIFFRES CLÉS — la carte qui chevauche la bannière
   ========================================================================== */
.stats{
  background:transparent !important;
  padding-block:0 !important;
  margin-top:clamp(-130px, -8vw, -56px);
  z-index:5;
}
.stats__grid{
  background:var(--carte-claire);
  border-radius:var(--radius-carte);
  box-shadow:var(--shadow-carte), inset 0 1px 0 rgba(255,255,255,.9);
  padding:clamp(28px,3.4vw,52px) clamp(24px,3.4vw,56px);
  max-width:min(1080px, calc(100% - clamp(20px,6vw,120px)));
  /* Décalé vers la droite : c'est ce déséquilibre qui donne la modernité. */
  margin-inline:auto clamp(20px,7vw,140px);
}
@media (max-width:899.98px){
  .stats__grid{ margin-inline:auto; max-width:100%; }
}
.chiffre__val{ font-family:var(--font-display); }
.chiffre__trait{ background:var(--line) !important; }

/* ==========================================================================
   9. TÊTES DE SECTION — éditoriales, jamais centrées
   --------------------------------------------------------------------------
   Le brief exclut « titre centré puis trois cartes ». Toutes les têtes
   passent donc en deux colonnes : sur-titre et titre à gauche, chapô calé
   à droite sur la ligne de base du titre.
   ========================================================================== */
@media (min-width:900px){
  .section__head--center{
    max-width:none !important; margin-inline:0 !important; text-align:left !important;
    display:grid; align-items:end;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    grid-template-areas:"eyebrow ." "titre lede";
    column-gap:var(--gap-lg); row-gap:0;
  }
  .section__head--center > .eyebrow{ grid-area:eyebrow; justify-content:flex-start; }
  .section__head--center > .eyebrow::after{ content:none; }
  .section__head--center > h2{ grid-area:titre; margin-bottom:0; }
  .section__head--center > .section__lede{
    grid-area:lede; margin-inline:0; max-width:44ch; padding-bottom:.6em;
  }
}
.section__head--center .eyebrow{ justify-content:flex-start; }

/* ==========================================================================
   10. NOS UNIVERS — la pile de carrés en zigzag
   --------------------------------------------------------------------------
   D'après l'image de référence : des cartes presque carrées, empilées en
   quinconce, chacune mordant sur la précédente. Une à droite, la suivante à
   gauche, et ainsi de suite. Une sur deux est sombre, l'autre claire — c'est
   l'alternance qui donne le rythme, pas l'alignement.

   Les décalages sont horizontaux ET verticaux : jamais deux cartes sur la
   même ligne, jamais deux cartes du même côté.
   ========================================================================== */
/* La section ne repose plus sur un aplat : une photographie de l'enseigne
   passe derriere les cartes, adoucie et desaturee (`fond-univers.jpg`,
   floutee a la fabrication plutot qu'au navigateur). Un degrade de la
   couleur de la page la reprend en haut et en bas, pour qu'elle fonde dans
   les sections voisines au lieu de former un bandeau. */
.univers{
  background:var(--perle);
  overflow:visible;
  isolation:isolate;
}
.univers::before{
  display:block;
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    /* Voile allege : la cliente ne voyait plus la photographie sur son
       telephone. Il ne sert plus qu'a fondre les bords dans les sections
       voisines et a garder le texte lisible — au milieu, la photographie
       se voit franchement, comme sur la reference envoyee. */
    linear-gradient(180deg,
      var(--perle) 0%,
      rgba(227,231,238,.62) 7%,
      rgba(227,231,238,.28) 34%,
      rgba(227,231,238,.28) 66%,
      rgba(227,231,238,.66) 93%,
      var(--perle) 100%),
    url("../assets/photos/fond-univers.jpg");
  /* La photographie de fond est composee en portrait (1200 x 2400) : un
     `cover` donne alors le meme cadrage sur ordinateur et sur telephone,
     sans recourir a `background-attachment:fixed`, qui ne fonctionne pas
     sur mobile et produisait donc deux rendus differents. */
  background-size:cover, cover;
  background-position:center, center top;
  background-repeat:no-repeat, no-repeat;
}

.univers__grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:0;
  align-items:start;
  max-width:1180px;
  margin-inline:auto;
}

/* --------------------------------------------------------------------------
   Le zigzag est le meme a tous les formats. Aucune mise en page de rechange
   sur telephone : memes carres, meme alternance, meme chevauchement. Seule
   l'echelle change.

   Deux mecanismes le permettent :
   · les colonnes et le chevauchement sont exprimes en parts de grille et en
     pourcentages, donc proportionnels a la largeur ;
   · chaque carte est un conteneur de requete (`container-type:inline-size`)
     et tout ce qu'elle contient se mesure en `cqw`, c'est-a-dire en pour-cent
     de sa propre largeur. Le contenu se reduit donc exactement comme le cadre.
-------------------------------------------------------------------------- */
.uni{
  container-type:inline-size;
  aspect-ratio:1/1.14;
  border-radius:var(--radius-carte) !important;
  box-shadow:var(--shadow-carte) !important;
}
.uni img{ filter:saturate(.94) contrast(1.02) brightness(1.02); border-radius:0 !important; }
.uni:hover img{ filter:saturate(1) contrast(1.02) brightness(1.04); }

/* style.css (passe du 3 septembre) impose encore `aspect-ratio:3/4.35` aux
   2e et 4e cartes et des `translateY`, avec une specificite superieure :
   les cartes claires repartaient a 981 px de haut au lieu de 771. On annule
   a specificite egale, hors de toute media query. */
.univers__grid > .uni:nth-child(1),
.univers__grid > .uni:nth-child(2),
.univers__grid > .uni:nth-child(3),
.univers__grid > .uni:nth-child(4){
  aspect-ratio:1/1.14;
  transform:none;
}

.uni:nth-child(1){ grid-column:6 / span 7; grid-row:1; z-index:1; }
.uni:nth-child(2){ grid-column:1 / span 7; grid-row:2; z-index:2; margin-top:-13%; }
.uni:nth-child(3){ grid-column:6 / span 7; grid-row:3; z-index:3; margin-top:-13%; }
.uni:nth-child(4){ grid-column:1 / span 7; grid-row:4; z-index:4; margin-top:-13%; }

/* La carte suivante mord sur un coin de la precedente : on reserve la bande
   recouverte pour qu'aucun texte ne s'y trouve. */
.uni .uni__body{ padding-right:19cqw; }

.univers__grid > .uni:hover{ transform:translateY(-1.4%) !important; box-shadow:var(--shadow-warm-lg) !important; }

/* --- une carte sur deux sombre, une sur deux claire ---------------------
   Le texte de chaque carte est cale EN HAUT : c'est le bas que la suivante
   vient recouvrir, donc rien de lisible n'est jamais masque.

   Le voile ne peut pas etre pose sur `.uni::after` : js/main.js ajoute la
   classe `.mask` aux cartes et `.mask::after` occupe deja ce pseudo-element
   pour le rideau de revelation — qui se retracte, emportant le voile. On le
   pose donc sur `.uni__body::before`.
------------------------------------------------------------------------- */
.uni__body{
  padding:6cqw;
  gap:0;
}
.uni__num{
  font-size:clamp(9px, 3.1cqw, 17px);
  letter-spacing:.18em;
  margin-bottom:2.6cqw;
}
.uni__title{
  font-size:clamp(15px, 7.2cqw, 44px);
  line-height:1.16;
  margin-bottom:2.4cqw;
}
.uni__desc{
  font-size:clamp(10px, 3.5cqw, 20px);
  line-height:1.5;
  max-width:34ch;
}

.uni:nth-child(odd) .uni__body{ justify-content:flex-start; }
.uni:nth-child(odd) .uni__body::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,
              rgba(28,33,43,.94) 0%, rgba(44,50,63,.80) 34%,
              rgba(70,78,94,.42) 62%, rgba(122,131,150,.10) 90%);
}
.uni:nth-child(odd) .uni__num  { color:#C2C8D4; }
.uni:nth-child(odd) .uni__title{ color:#F7F9FC; }
.uni:nth-child(odd) .uni__desc { color:rgba(244,246,249,.88); }

/* La carte claire : panneau de texte en haut, photographie en bas.
   `column-reverse` suffit — le balisage n'est pas touche. */
.uni:nth-child(even){
  display:flex; flex-direction:column-reverse;
  background:var(--carte-claire);
}
/* Les enfants d'un conteneur flex refusent par defaut de descendre sous leur
   hauteur de contenu : la carte s'allongeait alors au-dela du carre, et la
   hauteur en pourcentage de la photo, privee de reference definie, retombait
   sur la taille du fichier. On leve les deux. */
.uni:nth-child(even) > *{ min-height:0; }
.uni:nth-child(even) img{
  position:relative; inset:auto;
  width:100%; height:auto; flex:0 0 44%;
  object-fit:cover;
}
.uni:nth-child(even) .uni__body{
  flex:1 1 auto; min-height:0; height:auto; overflow:hidden;
  justify-content:flex-start;
  color:var(--espresso);
}
.uni:nth-child(even) .uni__num  { color:var(--gold); }
.uni:nth-child(even) .uni__title{ color:var(--espresso); }
.uni:nth-child(even) .uni__desc { color:var(--muted); }

/* Le bouton en gelule, visible en permanence — il ne dependait jusqu'ici que
   du survol, donc invisible au doigt. */
.uni__more{
  opacity:1 !important; transform:none !important;
  align-self:flex-start; margin-top:3.4cqw;
  padding:2.6cqw 5.4cqw; border-radius:999px;
  font-size:clamp(8px, 2.5cqw, 12px); letter-spacing:.2em;
  border:1px solid currentColor;
  transition:background .45s var(--ease-out), color .45s var(--ease-out);
}
.uni:nth-child(odd)  .uni__more{ color:#F7F9FC; }
.uni:nth-child(odd):hover  .uni__more{ background:#F7F9FC; color:var(--encre); }
.uni:nth-child(even) .uni__more{ color:var(--espresso); }
.uni:nth-child(even):hover .uni__more{ background:var(--espresso); color:var(--blanc-casse); }

/* ==========================================================================
   11. LA MAISON — image très grande, texte décalé
   ========================================================================== */
.maison{ background:var(--gris-clair); }
@media (min-width:1000px){
  .maison__grid{ grid-template-columns:1.08fr .92fr; align-items:center; }
  .maison__visual:not(:has(.maison__img-inset)){
    margin-left:calc(-1 * clamp(20px, 5vw, 90px));
    margin-top:0;
  }
  .maison__visual:not(:has(.maison__img-inset)) .maison__img-main{ aspect-ratio:5/6; }
  .maison__text{ padding-left:clamp(0px,2vw,40px); }
}
.maison__img-main{
  border-radius:var(--radius-carte) !important;
  box-shadow:var(--shadow-carte) !important;
}

/* ==========================================================================
   12. OFFRES, TECHNOLOGIES, AVIS, FIDÉLITÉ, INFOS
   --------------------------------------------------------------------------
   Toutes les cartes du site adoptent la même brique : grand arrondi, filet
   très fin, ombre diffuse, jamais de blanc pur.
   ========================================================================== */
.offres{ background:var(--perle) !important; }
.technologies{ background:var(--gris-clair) !important; }
.prestations{ background:var(--perle) !important; }
.galerie{ background:var(--perle) !important; }
.avis{ background:var(--gris-clair) !important; }
.fidelite{ background:var(--perle) !important; }
.infos{ background:var(--gris-clair) !important; }

.offre, .tech, .info-card, .avis-card, .fidelite__carte,
.form-card, .note-item, .temoin{
  background:var(--carte-claire) !important;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-carte) !important;
  box-shadow:var(--shadow-carte) !important;
}
.offre:hover, .tech:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-warm-lg) !important;
}
/* Les pictogrammes sont des emoji : un filtre pour les blanchir décolorerait
   aussi leur médaillon. On garde donc un médaillon clair, cerclé d'un filet,
   et on force une pile de polices emoji pour éviter les carrés vides. */
.tech__icon, .cat__icon, .filter, .footer__admin-ico, .tag,
.topbar__lien span, .announce .dot{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
              "Noto Emoji", var(--font-sans), sans-serif;
}
.tech__icon{
  background:linear-gradient(150deg, #FAFBFD 0%, #E6EAF1 62%, #D3D9E3 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(45,52,66,.22),
             0 12px 26px -18px rgba(45,52,66,.5) !important;
  color:var(--espresso);
}
/* Une carte technologie sur trois passe en brun : le même rythme que les
   univers, à plus petite échelle. */
.techs > .tech:nth-child(3n+2){
  background:var(--carte-sombre) !important;
  border-color:transparent;
}
.techs > .tech:nth-child(3n+2) h3{ color:#F4F6F9; }
.techs > .tech:nth-child(3n+2) p{ color:rgba(244,246,249,.82); }
.techs > .tech:nth-child(3n+2) .tech__icon{
  background:rgba(244,246,249,.16) !important;
  box-shadow:inset 0 0 0 1px rgba(244,246,249,.28) !important;
}

/* Les filtres de la carte des prestations : gélules fines. */
.filter{
  border-radius:999px !important;
  border:1px solid var(--line);
  background:transparent; color:var(--espresso);
}
.filter.is-active{ background:var(--carte-sombre); color:#F4F6F9; border-color:transparent; }

/* Citation : la carte brune de la référence, en pleine largeur utile. */
.quote{
  background:var(--carte-sombre) !important;
  border-radius:var(--radius-carte) !important;
  margin-inline:clamp(10px,2.4vw,38px);
  box-shadow:var(--shadow-carte) !important;
}
.quote blockquote{ color:#F4F6F9; }
.quote__author{ color:rgba(244,246,249,.72); }
.quote__mark{ color:rgba(194,200,212,.5); }

/* Carrousel de la galerie : mêmes arrondis, mêmes ombres. */
.carou__item{ border-radius:var(--radius-carte) !important; box-shadow:var(--shadow-carte); }

/* Pied de page */
.footer{ background:linear-gradient(168deg, #232936 0%, #2E3444 58%, #454E60 100%); }

/* Modales : la carte claire, arrondie, sans blanc pur. */
.modal__box, .review__box, .compte__box, .panier__tiroir{
  background:var(--carte-claire) !important;
  border-radius:var(--radius-carte) !important;
  box-shadow:var(--shadow-lg) !important;
}

/* La carte de fidélité reste un objet sombre : c'est une carte de membre,
   pas un bloc de contenu. On la réchauffe simplement au brun de la maison. */
.carte{
  background:var(--carte-sombre) !important;
  border-radius:var(--radius-carte) !important;
  box-shadow:var(--shadow-carte) !important;
  color:#EEF1F6;
}
.carte::before{
  background:
    radial-gradient(120% 90% at 84% 8%, rgba(236,240,246,.20) 0%, rgba(236,240,246,0) 58%),
    radial-gradient(80% 70% at 6% 100%, rgba(250,251,253,.14) 0%, rgba(250,251,253,0) 60%) !important;
}
.carte__nom, .carte__pts{ color:#F4F6F9; }
.carte__lbl, .carte__type, .carte__niv, .carte__pied{ color:rgba(240,243,248,.72); }

/* ==========================================================================
   13. DERNIERS RESTES CHAUDS
   --------------------------------------------------------------------------
   Quelques valeurs dorées étaient écrites en dur dans style.css, hors de
   toute variable : elles survivaient au changement de palette. On les
   ramène au gris ici plutôt que de toucher à la feuille historique.
   ========================================================================== */
.hero__titre em{ color:var(--gris-moyen) !important; }
.hero__soustitre{ color:var(--muted) !important; }
.hero__actions .btn-lien{ color:var(--anthracite) !important; }
.hero__actions .btn-lien::after{ background:var(--anthracite) !important; }
.hero__lieu .trait,
.eyebrow::before, .eyebrow::after,
.chiffre__trait,
.temoins__titre::after{ background:var(--gris-moyen) !important; }
.temoin__stars, .review__stars, .avis-card .tm{ color:var(--gris-moyen) !important; }
/* Le grand guillemet est un caractère, pas un filet : il prend une couleur,
   surtout pas un fond — un aplat gris venait recouvrir la citation. */
.quote__mark{ background:none !important; color:rgba(244,246,249,.34) !important; }

/* ==========================================================================
   14. LE BANDEAU SUPÉRIEUR — animation et finition
   --------------------------------------------------------------------------
   La date du jour a été retirée du défilé (côté js/main.js). Le bandeau
   gagne à la place une animation discrète : un reflet qui le traverse
   lentement, des séparateurs qui respirent, et un filet lumineux en pied.
   Rien de clignotant — c'est une lumière qui passe, pas un effet.
   ========================================================================== */
.announce{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* Le reflet : une bande claire, très inclinée, qui traverse le bandeau
   toutes les 11 secondes puis disparaît. */
.announce::before{
  content:""; position:absolute; inset:-40% -30%; z-index:0;
  pointer-events:none;
  background:linear-gradient(104deg,
              rgba(255,255,255,0)   42%,
              rgba(255,255,255,.10) 50%,
              rgba(255,255,255,0)   58%);
  transform:translateX(-60%);
  animation:refletBandeau 11s cubic-bezier(.42,0,.30,1) infinite;
}
@keyframes refletBandeau{
  0%, 62%  { transform:translateX(-60%); }
  100%     { transform:translateX(60%); }
}

/* Filet lumineux en pied de bandeau : le point clair se déplace d'un bord
   à l'autre, très lentement. Il signale la limite sans tracer un trait dur. */
.announce::after{
  content:""; display:block !important;
  position:absolute; left:0; right:0; bottom:0; height:1px; z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,
              rgba(174,181,196,0)   0%,
              rgba(174,181,196,.55) 50%,
              rgba(174,181,196,0)   100%);
  background-size:44% 100%;
  background-repeat:no-repeat;
  animation:filetBandeau 14s ease-in-out infinite alternate;
}
@keyframes filetBandeau{
  from{ background-position:-44% 0; }
  to  { background-position:144% 0; }
}

/* Le contenu passe devant le reflet. */
.topbar__gauche, .topbar__centre, .topbar__droite{ position:relative; z-index:1; }

/* Défilé un peu plus lent : à cette taille de texte, 42 s se lisaient
   comme une hâte. Le survol met toujours en pause. */
.topbar__piste{ animation-duration:56s; }

/* Les losanges séparateurs respirent, décalés les uns des autres. */
.topbar__piste .dot{
  animation:pointRespire 4.2s ease-in-out infinite;
  transform-origin:center;
}
.topbar__piste .dot:nth-of-type(2n)  { animation-delay:.7s; }
.topbar__piste .dot:nth-of-type(3n)  { animation-delay:1.4s; }
@keyframes pointRespire{
  0%,100%{ opacity:.45; transform:scale(.86) rotate(0deg); }
  50%    { opacity:1;   transform:scale(1.12) rotate(45deg); }
}

/* Les liens de contact : le pictogramme glisse au survol. */
.topbar__lien span[aria-hidden]{
  display:inline-block; margin-right:7px;
  transition:transform .5s var(--ease-out);
}
.topbar__lien:hover span[aria-hidden]{ transform:translateX(2px) scale(1.12); }

@media (prefers-reduced-motion:reduce){
  .announce::before, .announce::after,
  .topbar__piste, .topbar__piste .dot{ animation:none !important; }
  .announce::before{ opacity:0; }
}

/* Le défilé central ne doit pas venir mourir sous la note fixe de droite. */
.topbar__centre{ padding-inline:clamp(14px, 3vw, 46px); }

/* ==========================================================================
   15. MUR INSTAGRAM
   --------------------------------------------------------------------------
   Les publications du compte, dans la mise en page du site plutôt que dans
   un widget étranger. Mosaïque en colonnes : chaque vignette garde ses
   proportions d'origine, les reels verticaux sont donc plus hauts que les
   photos. C'est cette irrégularité qui fait la composition.
   ========================================================================== */
.insta{ background:var(--gris-clair); }

.insta__mur{
  columns:4;
  column-gap:clamp(12px, 1.5vw, 22px);
  margin-top:var(--stack);
}
@media (max-width:1099.98px){ .insta__mur{ columns:3; } }
@media (max-width:719.98px) { .insta__mur{ columns:2; } }

.insta__vue{
  position:relative;
  display:block;
  break-inside:avoid;
  margin-bottom:clamp(12px, 1.5vw, 22px);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--carte-claire);
  box-shadow:var(--shadow-carte);
  isolation:isolate;
  transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.insta__vue img{
  width:100%; height:auto; display:block;
  transition:transform 1.2s var(--ease-out), filter .7s var(--ease-out);
  filter:saturate(.96);
}
.insta__vue:hover{ transform:translateY(-6px); box-shadow:var(--shadow-warm-lg); }
.insta__vue:hover img{ transform:scale(1.05); filter:saturate(1.04); }

/* Le voile n'apparaît qu'au survol : la photographie doit rester nette. */
.insta__voile{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
              rgba(28,33,43,.82) 0%, rgba(44,50,63,.34) 46%, rgba(70,78,94,0) 78%);
  opacity:0; transition:opacity .55s var(--ease-out);
}
.insta__lien{
  position:absolute; left:clamp(14px,1.4vw,20px); bottom:clamp(14px,1.4vw,20px);
  z-index:2; pointer-events:none;
  font-family:var(--font-sans);
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blanc-casse);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.insta__vue:hover .insta__voile,
.insta__vue:focus-visible .insta__voile{ opacity:1; }
.insta__vue:hover .insta__lien,
.insta__vue:focus-visible .insta__lien{ opacity:1; transform:none; }

/* Repère des vidéos et des reels — visible en permanence, y compris au doigt. */
.insta__play{
  position:absolute; top:12px; right:12px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--blanc-casse);
  background:rgba(28,33,43,.52);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(244,246,249,.34);
  padding-left:2px;
}

.insta__pied{ margin-top:clamp(30px,3.6vw,52px); display:flex; justify-content:center; }

/* La mosaïque en colonnes ne peut pas décaler ses éléments un par un sans
   casser l'équilibre des colonnes : l'irrégularité vient des hauteurs. */
@media (prefers-reduced-motion:reduce){
  .insta__vue, .insta__vue img{ transition:none; }
}