/* Dupothèque — identité « Le Sillage ».
   Les couleurs viennent de la charte : ne pas les modifier ici sans mettre à
   jour identite/dupotheque_brand.py, qui fait foi. */
:root {
  color-scheme: light;   /* pas de thème sombre : décision de l'éditeur */
  --ivoire:  #FBF3EE;
  --prune:   #3A2136;
  --prune-m: #6B5462;
  --bordeaux:#7A2E3C;
  --rose:    #E3AE9B;
  --filet:   #E3D5CF;
  --surface: #FFFFFF;       /* fonds de cartes */
  --tinte:   rgba(122,46,60,.055);   /* aplat discret pour encadrés */
  --mesure:  38rem;         /* longueur de ligne confortable en lecture */
}

@font-face { font-family:'Fraunces'; src:url('/assets/fonts/Fraunces-600.woff2') format('woff2');
             font-weight:600; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('/assets/fonts/Fraunces-700.woff2') format('woff2');
             font-weight:700; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('/assets/fonts/Manrope-400.woff2') format('woff2');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('/assets/fonts/Manrope-500.woff2') format('woff2');
             font-weight:500; font-display:swap; }

*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--ivoire); color:var(--prune);
  font-family:'Manrope',system-ui,sans-serif; font-size:1.06rem; line-height:1.68;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3 { font-family:'Fraunces',Georgia,serif; font-weight:700; line-height:1.18; margin:2.4em 0 .6em; }
h1 { font-size:clamp(1.9rem,5vw,2.7rem); margin-top:0; }
h2 { font-size:clamp(1.35rem,3.5vw,1.75rem); }
h3 { font-size:1.15rem; font-weight:600; }
a { color:var(--bordeaux); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover { text-decoration-thickness:2px; }

.enveloppe { max-width:var(--mesure); margin:0 auto; padding:0 1.25rem; }

header.site { border-bottom:1px solid var(--filet); padding:1.1rem 0; margin-bottom:2.5rem; }
header.site .enveloppe { display:flex; align-items:center; gap:.75rem; }
header.site img { width:34px; height:34px; }
header.site .nom {
  font-family:'Fraunces',serif; font-weight:700; font-size:1.15rem;
  letter-spacing:.02em; color:var(--prune); text-decoration:none;
}
header.site .bandeau { margin-left:auto; font-size:.78rem; color:var(--prune-m); letter-spacing:.09em; text-transform:uppercase; }

.chapeau { font-size:1.12rem; color:var(--prune-m); }

/* Tableau de comparaison des pyramides olfactives */
table { width:100%; border-collapse:collapse; margin:1.8rem 0; font-size:.97rem; }
th,td { text-align:left; padding:.62rem .5rem; border-bottom:1px solid var(--filet); vertical-align:top; }
th { font-weight:500; color:var(--prune-m); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; }
.enrobage { overflow-x:auto; }

blockquote {
  margin:1.8rem 0; padding:.9rem 1.1rem; border-left:3px solid var(--rose);
  background:rgba(227,174,155,.13); color:var(--prune-m); font-size:.95rem;
}

.mention {
  margin:3rem 0 0; padding:1rem 1.1rem; border:1px solid var(--filet);
  font-size:.86rem; color:var(--prune-m);
}

footer.site {
  margin-top:4rem; border-top:1px solid var(--filet); padding:2rem 0 3rem;
  font-size:.86rem; color:var(--prune-m);
}
footer.site a { color:var(--prune-m); }

/* ── Duo comparatif : les deux flacons côte à côte ────────────────────────
   Les images viennent du flux produit du marchand, fournies pour l'usage
   affilié. On ne les recopie pas sur le serveur : elles sont servies par son
   CDN, donc toujours à jour et sans coût de stockage. */
.duo { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:stretch;
       margin:2.2rem 0; }
.duo .flacon {
  display:flex; flex-direction:column; text-align:center;
  border:1px solid var(--filet); padding:1.1rem .8rem 1rem;
  background:var(--surface);
}
.duo .flacon img { width:100%; max-width:190px; height:200px; object-fit:contain;
                   margin:0 auto .8rem; mix-blend-mode:multiply; }
.duo .marque { font-size:.72rem; letter-spacing:.11em; text-transform:uppercase;
               color:var(--prune-m); margin-bottom:.3rem; }
.duo .nom { font-family:'Fraunces',serif; font-weight:600; font-size:1.02rem;
            line-height:1.28; margin-bottom:.55rem; }
.duo .nom a { color:var(--prune); text-decoration:none; }
.duo .nom a:hover { text-decoration:underline; }
.duo .prix { margin-top:auto; font-family:'Fraunces',serif; font-size:1.5rem;
             font-weight:700; color:var(--bordeaux); }
.duo .ecart { display:flex; flex-direction:column; align-items:center;
              justify-content:center; color:var(--prune-m); padding:0 .2rem; }
.duo .ecart b { font-family:'Fraunces',serif; font-size:1.35rem; color:var(--bordeaux);
                line-height:1; }
.duo .ecart span { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
                   margin-top:.25rem; }

.notes-bandeau {
  margin:2rem 0; padding:1.1rem 1.2rem; background:rgba(227,174,155,.15);
  border-left:3px solid var(--rose);
}
.notes-bandeau .titre { font-size:.72rem; letter-spacing:.11em; text-transform:uppercase;
                        color:var(--prune-m); margin-bottom:.5rem; }
.notes-bandeau .liste { font-family:'Fraunces',serif; font-size:1.15rem; line-height:1.5; }

@media (max-width:34rem){
  .duo { grid-template-columns:1fr; }
  .duo .ecart { flex-direction:row; gap:.5rem; padding:.4rem 0; }
  .duo .flacon img { height:170px; }
}

/* ── Carte matière : un fait vérifiable sur une note partagée ─────────────
   Rompt le texte entre deux sections et apprend quelque chose. Reprend les
   codes des épingles : fond prune, titrage Fraunces, accent rose poudré.
   Le rose ne va QUE sur fond sombre — sur ivoire il tombe à 1,8:1. */
.carte-matiere {
  margin:2.4rem 0; padding:1.6rem 1.5rem; background:var(--prune); color:#F6EDE8;
  position:relative; overflow:hidden;
}
.carte-matiere .etiquette {
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose); margin-bottom:.7rem;
}
.carte-matiere h3 {
  font-family:'Fraunces',serif; font-weight:700; font-size:1.35rem;
  line-height:1.25; margin:0 0 .6rem; color:#F6EDE8;
}
.carte-matiere p { margin:0; font-size:.97rem; line-height:1.62; color:#DFCFD9; }
.carte-matiere .matiere {
  font-family:'Fraunces',serif; font-size:.95rem; color:var(--rose);
  margin-top:.9rem; display:block;
}
.carte-matiere .matiere a { color:var(--rose); text-decoration-thickness:1px; }
/* arc de sillage en filigrane, repris du monogramme */
.carte-matiere::after {
  content:''; position:absolute; right:-3.5rem; top:50%; transform:translateY(-50%);
  width:11rem; height:11rem; border-radius:50%;
  border:2px solid rgba(227,174,155,.16); border-left-color:transparent;
  border-bottom-color:transparent;
}

/* ── Pastilles de famille olfactive ───────────────────────────────────────
   Codage couleur plutôt que vignettes photo : la parfumerie est faite de
   résines et de synthèses qui ne se photographient pas de façon
   reconnaissable. La couleur dit la famille, ce qu'aucune photo ne fait. */
.pastille {
  display:inline-block; width:.55em; height:.55em; border-radius:50%;
  margin-right:.32em; vertical-align:.04em; flex:none;
}
.legende-familles {
  display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin:.6rem 0 1.8rem;
  font-size:.78rem; color:var(--prune-m);
}
.legende-familles span { white-space:nowrap; }

/* ─────────────────────────────────────────────────────────────────────
   Page d'accueil. Elle déborde la mesure de lecture (38 rem) parce
   qu'une grille de vignettes a besoin de largeur ; les articles, eux,
   restent en colonne étroite.
   ───────────────────────────────────────────────────────────────────── */
.enveloppe.large { max-width:64rem; }

header.site nav.bandeau { display:flex; gap:1.1rem; margin-left:auto;
  font-size:.8rem; letter-spacing:.04em; }
header.site nav.bandeau a { color:var(--prune-m); text-decoration:none; }
header.site nav.bandeau a:hover { color:var(--bordeaux); text-decoration:underline; }

.manchette { max-width:var(--mesure); }
.manchette .chapeau { font-size:1.16rem; }
/* Les trois arguments, chacun avec sa vignette. Des pastilles de texte
   empilées faisaient plat, et une icône générique n'aurait rien dit de plus :
   chaque dessin porte l'argument qu'il accompagne. */
.promesses { list-style:none; padding:0; margin:2rem 0 0;
  display:grid; gap:1rem; grid-template-columns:repeat(3,1fr);
  font-size:.9rem; color:var(--prune-m); }
@media (max-width:52rem) { .promesses { grid-template-columns:1fr; } }
.promesses li {
  border:1px solid var(--filet); background:var(--surface);
  padding:1.1rem 1rem 1.15rem; text-align:center; line-height:1.5;
}
.promesses b { color:var(--prune); font-weight:600; }
.promesses .vig { display:block; width:92px; height:63px; margin:0 auto .85rem; }

/* Pyramides : le fond est le plus appuyé, c'est lui qui fonde un rapprochement. */
.vig .pyr .e1 { fill:var(--rose); opacity:.38; }
.vig .pyr .e2 { fill:var(--rose); }
.vig .pyr .e3 { fill:var(--bordeaux); }

/* Flacons : l'un signé, l'autre muet. */
.vig .fl path { fill:var(--prune); }
.vig .fl .etiq { fill:var(--ivoire); stroke:var(--prune); stroke-width:1; }
.vig .fl .txt { fill:none; stroke:var(--bordeaux); stroke-width:1.2;
                stroke-linecap:round; }
.vig .fl.muet path { fill:none; stroke:var(--prune-m); stroke-width:1.3; opacity:.75; }
.vig .fl .etiq.vide { fill:none; stroke:var(--prune-m); stroke-dasharray:2 2; }

/* Étoiles barrées : nous ne notons rien, faute d'avoir senti. */
.vig .et path { fill:none; stroke:var(--prune-m); stroke-width:1.3; opacity:.9; }
.vig .barre { fill:none; stroke:var(--bordeaux); stroke-width:2;
              stroke-linecap:round; }

h2.rubrique { display:flex; align-items:baseline; gap:.8rem;
  border-bottom:1px solid var(--filet); padding-bottom:.5rem; }
h2.rubrique span { margin-left:auto; font-family:'Manrope',sans-serif;
  font-size:.76rem; font-weight:400; letter-spacing:.08em;
  text-transform:uppercase; color:var(--prune-m); }

.grille { display:grid; gap:1.1rem; margin-top:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); }

.vignette { border:1px solid var(--filet); background:var(--surface); }
.vignette a { display:block; padding:1rem 1rem 1.1rem; color:inherit;
  text-decoration:none; height:100%; }
.vignette:hover { border-color:var(--rose); }
.vignette:hover h2, .vignette:hover h3 { color:var(--bordeaux);
  text-decoration:underline; }
.vignette h2, .vignette h3 { margin:.9rem 0 .4rem; font-size:1.03rem;
  font-weight:600; line-height:1.3; font-family:'Fraunces',Georgia,serif; }

/* Les deux flacons en vis-à-vis : c'est la comparaison, en un coup d'œil. */
.paire { display:flex; align-items:center; justify-content:center; gap:.4rem;
  background:linear-gradient(var(--ivoire),var(--surface)); padding:.7rem .4rem;
  border:1px solid var(--filet); }
.paire img { width:auto; height:110px; object-fit:contain; mix-blend-mode:multiply; }
.badge { flex:none; font-family:'Fraunces',serif; font-weight:700;
  font-size:.9rem; color:#fff; background:var(--bordeaux);
  border-radius:2rem; padding:.2rem .55rem; white-space:nowrap; }

.face { margin:0; font-size:.9rem; line-height:1.5; }
.face .cher { color:var(--prune-m); text-decoration:line-through;
  text-decoration-color:var(--rose); }
.face .fleche { color:var(--rose); margin:0 .25rem; }
.face .doux { color:var(--prune); font-weight:500; }
.preuve { margin:.5rem 0 0; font-size:.79rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--prune-m); }

.methode { max-width:var(--mesure); margin-top:3.5rem; }
.methode ol { padding-left:1.2rem; }
.methode li { margin-bottom:.7rem; }
.methode .limite { margin-top:1.6rem; padding:1rem 1.15rem;
  border-left:3px solid var(--bordeaux); background:var(--tinte);
  font-size:.95rem; }

.guides { grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); }
.fiche { border-top:2px solid var(--filet); padding-top:.85rem; }
.fiche h2, .fiche h3 { margin:0 0 .4rem; font-size:1.02rem;
  font-weight:600; line-height:1.3; }
.fiche h2 a, .fiche h3 a { text-decoration:none; }
.fiche h2 a:hover, .fiche h3 a:hover { text-decoration:underline; }
.fiche p { margin:0; font-size:.88rem; color:var(--prune-m); line-height:1.55; }

.franchise { max-width:var(--mesure); margin-top:3.5rem; padding:1.4rem 1.5rem;
  border:1px solid var(--filet); background:var(--surface); }
.franchise h2 { margin-top:0; font-size:1.2rem; }
.franchise p { font-size:.92rem; color:var(--prune-m); }

@media (max-width:30rem) {
  .paire img { height:88px; }
  .promesses { font-size:.86rem; gap:.7rem; }
  .promesses li { padding:.9rem .85rem 1rem; }
}

/* Les intitulés du menu se coupaient en deux lignes (« LES / FAMILLES »). */
header.site nav.bandeau a { white-space:nowrap; }


/* Le menu débordait de l'écran sur mobile : quatre intitulés en `nowrap` dans
   un flex sans repli. Il passe sur sa propre ligne sous le logo, réparti sur
   toute la largeur, plutôt que de disparaître à droite. */
@media (max-width:44rem) {
  header.site .enveloppe { flex-wrap:wrap; row-gap:.7rem; }
  header.site nav.bandeau {
    order:3; width:100%; margin-left:0;
    justify-content:space-between; gap:.4rem;
    font-size:.72rem; letter-spacing:.02em;
  }
}
@media (max-width:22rem) {
  header.site nav.bandeau { flex-wrap:wrap; justify-content:flex-start; gap:.35rem .9rem; }
}

/* ── Rubrique : le catalogue d'une maison ─────────────────────────────────
   Les fiches sont nombreuses (une gamme peut compter quarante références) :
   la grille reste dense et la vignette petite, pour que la page se parcoure
   sans devenir un défilement interminable. */
.grille-refs { display:grid; gap:.7rem; margin:1.4rem 0 2.2rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); }
.ref { display:flex; gap:.75rem; align-items:flex-start;
  border:1px solid var(--filet); background:var(--surface); padding:.7rem .8rem; }
.ref img { flex:none; width:auto; height:70px; object-fit:contain;
  mix-blend-mode:multiply; }
.ref .corps { min-width:0; }
.ref .nom { font-size:.88rem; line-height:1.35; font-weight:500; }
.ref .nom a { color:var(--prune); text-decoration:none; }
.ref .nom a:hover { text-decoration:underline; }
.ref .prix { font-family:'Fraunces',serif; font-weight:700; font-size:1.05rem;
  color:var(--bordeaux); margin-top:.25rem; }
.ref .notes { margin-top:.35rem; font-size:.76rem; color:var(--prune-m);
  display:flex; flex-wrap:wrap; gap:.15rem .5rem; }
.ref .notes .n { display:inline-flex; align-items:center; gap:.22rem; }

/* Les visuels produit sont cliquables au même titre que les noms : c'est la
   cible la plus large de la carte. Le lien reste discret, seul le curseur et
   un léger retrait au survol le signalent. */
a.visuel { display:block; text-decoration:none; }
a.visuel img { transition:opacity .15s ease; }
a.visuel:hover img { opacity:.82; }
.ref a.visuel { flex:none; }

/* Dossiers : la marque au-dessus du nom, et les renvois vers les comparaisons
   qui reposent sur la même matière. Ce maillage interne manquait : le site
   n'avait qu'une seule entrée de navigation. */
.ref .marque { font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--prune-m); margin-bottom:.15rem; }
ul.voisines { list-style:none; padding:0; margin:1.2rem 0 2rem;
  display:grid; gap:.5rem; }
ul.voisines li { border-left:3px solid var(--rose); padding:.5rem .9rem;
  background:var(--tinte); }
ul.voisines a { color:var(--prune); text-decoration:none; font-weight:500; }
ul.voisines a:hover { text-decoration:underline; color:var(--bordeaux); }

/* Le flacon en tête d'une fiche parfum. Reprend la carte du duo comparatif,
   en solitaire et un peu plus grand : c'est le sujet de la page. */
.flacon-seul {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border:1px solid var(--filet); background:var(--surface);
  padding:1.4rem 1rem 1.2rem; margin:0 auto 2.2rem; max-width:20rem;
}
.flacon-seul img { width:auto; max-width:230px; height:250px; object-fit:contain;
  mix-blend-mode:multiply; margin-bottom:.9rem; }
.flacon-seul .marque { font-size:.72rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--prune-m); margin-bottom:.3rem; }
.flacon-seul .nom { font-family:'Fraunces',serif; font-weight:600;
  font-size:1.1rem; line-height:1.28; margin-bottom:.5rem; }
.flacon-seul .nom a { color:var(--prune); text-decoration:none; }
.flacon-seul .nom a:hover { text-decoration:underline; }
.flacon-seul .prix { font-family:'Fraunces',serif; font-size:1.5rem;
  font-weight:700; color:var(--bordeaux); }

/* Page courante dans le menu : un repère, pas un bouton. */
header.site nav.bandeau a.ici { color:var(--prune); border-bottom:1px solid var(--rose);
  padding-bottom:2px; }

/* Le libellé de section devient le lien vers sa rubrique : l'accueil est une
   vitrine, la rubrique l'endroit où l'on parcourt. */
h2.rubrique a.tout { margin-left:auto; font-family:'Manrope',sans-serif;
  font-size:.76rem; font-weight:400; letter-spacing:.08em;
  text-transform:uppercase; color:var(--prune-m); text-decoration:none;
  white-space:nowrap; }
h2.rubrique a.tout:hover { color:var(--bordeaux); text-decoration:underline; }

/* Carte de rubrique avec visuel. Sans image, la carte garde sa forme
   précédente : les guides et les dossiers n'en ont pas, et une vignette vide
   vaudrait moins que pas de vignette. */
.fiche.illustree { display:flex; gap:.85rem; align-items:flex-start; }
.fiche.illustree img { flex:none; width:auto; height:82px; object-fit:contain;
  mix-blend-mode:multiply; }
.fiche .texte { min-width:0; }