/* ─────────────────────────────────────────────────────────────────
   Paris 17 — rubrique compléments alimentaires
   Registre éditorial : on lit un conseil, pas une fiche produit.
   Le commerce reste présent mais jamais premier.

   Aucun token n'est redéfini ici : tout est consommé depuis
   p17-redesign.css, pour suivre le thème actif (terracotta / bleu)
   et l'ambiance typographique choisie.
   ───────────────────────────────────────────────────────────────── */

/* ══ gabarit de page : hero, couverture, corps ══════════════════════ */

/* Hero en deux colonnes : les photos du studio sont toutes en 2:3, un bandeau
   pleine largeur les décapiterait. La colonne image conserve donc le portrait. */
.p17-cp__hd{ padding:clamp(44px,6vw,80px) 24px 0; }
.p17-cp__hd-in{
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(32px,5vw,64px); align-items:center;
}
.p17-cp__hd--seul .p17-cp__hd-in{ grid-template-columns:minmax(0,1fr); max-width:760px; }
.p17-cp__eyebrow{
  display:inline-block; margin:0 0 22px; padding:7px 16px; border-radius:99px;
  background:var(--p17-accent-soft,rgba(192,112,90,.09));
  font-family:var(--p17-font-body); font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--p17-accent);
}
.p17-cp__title{
  font-family:var(--p17-font-display); font-weight:600;
  font-size:clamp(1.95rem,4.2vw,3rem); line-height:1.1; letter-spacing:-.02em;
  color:var(--p17-text); margin:0; text-wrap:balance;
}
.p17-cp__chapo{
  margin:24px 0 0; max-width:34em;
  font-size:clamp(1.02rem,1.5vw,1.16rem); line-height:1.65; color:var(--p17-text-soft);
}
.p17-cp__sign{
  margin:26px 0 0; font-size:.84rem; letter-spacing:.04em; color:var(--p17-muted);
}
.p17-cp__sign span:first-child{ font-weight:600; color:var(--p17-text-soft); }
.p17-cp__dot{ margin:0 .5em; }

.p17-cp__cover{ margin:0; }
.p17-cp__cover img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 18%;
  display:block; border-radius:18px;
}

@media(max-width:860px){
  .p17-cp__hd-in{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .p17-cp__cover{ order:-1; max-width:380px; }
  .p17-cp__cover img{ aspect-ratio:3/2; object-position:center 22%; }
}

/* Le corps s'aligne sur le hero. En border-box le padding est compté dans la
   largeur : 1120 + 2×24 pour que la colonne de texte parte au même x que le titre. */
.p17-cp__body{
  max-width:1168px; margin:0 auto; padding:clamp(46px,6vw,76px) 24px 0;
}
/* Le conteneur prend toute la largeur ; ce sont les éléments qui se bornent,
   pour que grilles et fiches respirent sans allonger les lignes de texte. */
.p17-cp__body > .p17c{ max-width:1120px; }
.p17-cp__body > .p17c > .p17-note,
.p17-cp__body > .p17c > .p17-nutriments,
.p17-cp__body > .p17c > .p17-vers{ max-width:38em; }
.p17-cp__body > .p17c > .p17-fiche{ max-width:860px; }

/* bandeau de clôture du gabarit */
.p17-cp__band{ margin-top:clamp(56px,8vw,96px); background:var(--p17-text); }
.p17-cp__band-in{
  max-width:1120px; margin:0 auto; padding:clamp(38px,5vw,62px) 24px;
  display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;
}
/* Le thème impose ses couleurs de titre avec une forte spécificité : sur fond
   sombre il faut reprendre la main, sans quoi l'encre foncée devient illisible. */
.p17-cp__band .p17-cp__band-in h2{
  font-family:var(--p17-font-display) !important; font-weight:600;
  color:var(--p17-bg) !important;
  font-size:clamp(1.5rem,3vw,2.1rem); margin:0 0 .35em; line-height:1.2;
}
.p17-cp__band .p17-cp__band-in p{
  margin:0; max-width:34em; color:rgba(251,247,242,.74) !important; line-height:1.65;
}
.p17-cp__band-act{ display:flex; flex-direction:column; align-items:center; gap:14px; }
/* Même dégradé de soulignement que sur les cartes : sur le bouton il recouvrait
   le fond et la couleur de texte du thème le rendait illisible au survol. */
.p17-cp__band .p17-cp__btn,
.p17-cp__band .p17-cp__btn:hover,
.p17-cp__band .p17-cp__btn:focus{
  background-image:none !important;
  color:var(--p17-on-accent,#fff) !important;
}
.p17-cp__btn{
  display:inline-block; background-color:var(--p17-accent);
  font-weight:600; font-size:.95rem; text-decoration:none;
  padding:15px 32px; border-radius:99px; transition:background-color .2s ease; white-space:nowrap;
}
.p17-cp__band .p17-cp__btn:hover{ background-color:var(--p17-accent-h) !important; }

.p17-cp__band .p17-cp__tel,
.p17-cp__band .p17-cp__tel:hover{
  background-image:none !important; text-decoration:none; font-size:.95rem;
  color:rgba(251,247,242,.82) !important;
}
.p17-cp__band .p17-cp__tel:hover{ color:var(--p17-bg) !important; }

@media(max-width:720px){
  .p17-cp__band-in{ flex-direction:column; align-items:flex-start; }
  .p17-cp__band-act{ align-items:flex-start; }
}

/* ══ corps éditorial ════════════════════════════════════════════════ */

.p17c{ color:var(--p17-text); font-family:var(--p17-font-body); }
/* mesure de lecture : au-delà, l'œil perd la ligne suivante */
.p17c > p,
.p17c > h2,
.p17c > h3{ max-width:38em; }
.p17c p{ line-height:1.75; color:var(--p17-text-soft); }
.p17c h2,.p17c h3{ font-family:var(--p17-font-display); color:var(--p17-text); letter-spacing:-.01em; }
.p17c h2{ font-size:clamp(1.55rem,3.2vw,2.15rem); line-height:1.22; margin:2.6em 0 .7em; font-weight:600; }
.p17c h2:first-child{ margin-top:0; }
.p17c h3{ font-size:clamp(1.14rem,2vw,1.32rem); line-height:1.35; margin:2em 0 .5em; font-weight:600; }
.p17c em{ font-style:italic; }

/* chapô — distinction purement typographique, pas de filet latéral */
.p17-chapo{
  font-size:1.26rem !important; line-height:1.6; font-weight:400;
  color:var(--p17-text) !important; max-width:38em; margin:0 0 2.2em;
}

/* ── encadré nutriments : le seul endroit où l'on cite un effet ── */
.p17-nutriments{
  background:var(--p17-bg-2); border-radius:14px;
  padding:26px 28px; margin:2.2em 0;
}
.p17-nutriments__k{
  margin:0 0 .9em !important; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--p17-accent) !important;
}
.p17-nutriments ul{ margin:0; padding:0; list-style:none; }
.p17-nutriments li{
  padding:.65em 0; border-top:1px solid var(--p17-line);
  color:var(--p17-text-soft); line-height:1.6; font-size:.97rem;
}
.p17-nutriments li:first-child{ border-top:0; padding-top:0; }
.p17-nutriments li strong{ color:var(--p17-text); font-weight:600; }
.p17-nutriments__src{
  margin:1.1em 0 0 !important; font-size:.78rem; color:var(--p17-muted) !important; font-style:italic;
}

/* ── note de cadrage : intitulé posé sur le filet supérieur, façon légende ── */
.p17-note{
  position:relative; border:1px solid var(--p17-line); border-radius:12px;
  padding:30px 26px 22px; margin:2.6em 0; background:var(--p17-bg);
}
.p17-note__k{
  position:absolute; top:0; left:22px; transform:translateY(-50%);
  margin:0 !important; padding:0 10px; background:var(--p17-bg);
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--p17-accent) !important;
}
.p17-note p{ margin:0 0 .6em; font-size:.97rem; }
.p17-note p:last-child{ margin-bottom:0; }

/* ── grille de fiches : média au-dessus, texte dessous ──────────────
   Variante compacte de la fiche. En pleine largeur empilée, 18 références
   faisaient near 12 écrans de défilement ; en trois colonnes, on tombe à trois. */
.p17-fiches{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:20px; margin:1.6em 0 0; max-width:none;
}
.p17-cp__body > .p17c > .p17-fiches{ max-width:none; }
.p17-intro-bloc{ max-width:38em; }

.p17-fiches .p17-fiche{
  grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:0; padding:0; margin:0;
  max-width:none; overflow:hidden;
}
.p17-fiches .p17-fiche__media{ border-radius:0; }
/* Média carré : les flacons sont centrés, et un 4:5 rendait la carte trop haute. */
/* contain, pas cover : recadrer un packshot coupe le flacon ou ne montre
   qu'une zone vide selon la composition de la photo. */
.p17-fiches .p17-fiche__media{ background:var(--p17-bg-2); }
.p17-fiches .p17-fiche__media video,
.p17-fiches .p17-fiche__media img{ border-radius:0; aspect-ratio:4/3; object-fit:contain; }
.p17-fiches .p17-fiche__corps{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.p17-fiches .p17-fiche__titre{ font-size:1.06rem !important; margin-bottom:.3em !important; }
.p17-fiches .p17-fiche__role{ font-size:.65rem; margin-bottom:.6em !important; }
.p17-fiches .p17-fiche__texte{ font-size:.9rem; line-height:1.6; margin-bottom:.8em !important; }
.p17-fiches .p17-fiche__lien{ margin-top:auto !important; padding-top:.6em; }
.p17-fiches .p17-fiche__lien a{ font-size:.86rem; }

/* ── fiche-conseil produit ── */
.p17-fiche{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:28px;
  align-items:start; padding:26px; margin:1.6em 0;
  border:1px solid var(--p17-line); border-radius:16px; background:var(--p17-bg);
  transition:box-shadow .25s ease;
}
.p17-fiche:hover{ box-shadow:var(--p17-shadow,0 12px 32px rgba(51,46,42,.08)); }
.p17-fiche__media{ position:relative; border-radius:12px; overflow:hidden; background:var(--p17-bg-3); }
.p17-fiche__media video,
.p17-fiche__media img{ width:100%; height:auto; display:block; border-radius:12px; }
.p17-fiche__badge{
  position:absolute; top:10px; left:10px; z-index:2; pointer-events:none;
  background:var(--p17-accent); color:var(--p17-on-accent,#fff); font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:99px;
}
.p17-fiche__titre{ margin:0 0 .35em !important; font-size:1.24rem !important; }
.p17-fiche__role{
  margin:0 0 .7em !important; font-size:.72rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--p17-muted) !important;
}
.p17-fiche__texte{ margin:0 0 1em !important; font-size:.98rem; }
.p17-fiche__lien{ margin:0 !important; }
.p17-fiche__lien a{
  font-size:.92rem; font-weight:600; color:var(--p17-accent); text-decoration:none;
  border-bottom:1px solid var(--p17-accent-soft,rgba(192,112,90,.3)); padding-bottom:2px;
}
.p17-fiche__lien a:hover{ color:var(--p17-accent-h); border-bottom-color:var(--p17-accent-h); }

/* ══ bandes pleine largeur : rompent la colonne de texte ═══════════ */

/* .p17-cp fait exactement la largeur utile (hors barre de défilement) : y clipper
   absorbe les quelques pixels dont 100vw dépasse, sans créer de conteneur de
   défilement — contrairement à overflow:hidden, et sans casser le sticky. */
.p17-cp{ overflow-x:clip; }
.p17-bande{
  width:100vw; max-width:100vw; margin-left:calc(50% - 50vw);
  padding:clamp(52px,7vw,88px) 24px; margin-top:clamp(52px,7vw,88px);
}
.p17-bande--sable{ background:var(--p17-bg-2); }
.p17-bande--fonce{ background:var(--p17-text); }
.p17-bande__in{ max-width:1120px; margin:0 auto; }
.p17-bande__t{
  font-family:var(--p17-font-display); font-weight:600; margin:0 0 .4em;
  font-size:clamp(1.5rem,3.2vw,2.15rem); line-height:1.2; color:var(--p17-text);
}
.p17-bande__i{ margin:0 0 2em; max-width:38em; color:var(--p17-text-soft); line-height:1.7; }
.p17-bande--fonce .p17-bande__t{ color:var(--p17-bg); }
.p17-bande--fonce .p17-bande__i,
.p17-bande--fonce p{ color:rgba(251,247,242,.74); }
.p17-bande .p17-grille{ margin:0; }

/* ── les trois critères ── */
.p17-principes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(24px,3vw,40px);
}
.p17-principes li{ margin:0; }
.p17-principes__n{
  display:block; font-family:var(--p17-font-display); font-size:1.6rem;
  color:var(--p17-accent); margin-bottom:.35em; line-height:1;
}
.p17-principes h3{
  font-family:var(--p17-font-display); font-weight:600; font-size:1.16rem;
  margin:0 0 .5em !important; color:var(--p17-text); line-height:1.3;
}
.p17-principes p{ margin:0; font-size:.97rem; line-height:1.7; color:var(--p17-text-soft); }

/* ── renvoi illustré ── */
.p17-teaser{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(24px,3vw,40px); align-items:center; text-decoration:none;
  background:var(--p17-bg); border:1px solid var(--p17-line); border-radius:18px;
  overflow:hidden; transition:box-shadow .25s ease, transform .25s ease;
}
.p17-teaser:hover{ transform:translateY(-3px); box-shadow:var(--p17-shadow,0 14px 34px rgba(51,46,42,.10)); }
.p17-teaser__img{
  display:block; align-self:stretch; min-height:240px;
  background:var(--p17-bg-3) center 22%/cover no-repeat;
}
.p17-teaser__c{ display:block; padding:clamp(24px,3vw,36px) clamp(24px,3vw,36px) clamp(24px,3vw,36px) 0; }
.p17-teaser__s{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--p17-accent); margin-bottom:.8em;
}
/* span dans un lien : le thème y impose sa police, d'où le !important */
.p17-teaser .p17-teaser__t{
  display:block; font-family:var(--p17-font-display) !important; font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.22; color:var(--p17-text); margin-bottom:.5em;
}
.p17-teaser__x{ display:block; color:var(--p17-text-soft); line-height:1.7; max-width:34em; }
.p17-teaser__l{ display:block; margin-top:1.2em; font-weight:600; color:var(--p17-accent); }

@media(max-width:760px){
  .p17-teaser{ grid-template-columns:1fr; }
  .p17-teaser__img{ min-height:210px; }
  .p17-teaser__c{ padding:24px; }
}

/* ── lien de renvoi vers une autre page de la rubrique ── */
.p17-vers{ margin:2.4em 0 0 !important; }
.p17-vers a{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:1rem; font-weight:600; color:var(--p17-accent); text-decoration:none;
  border-bottom:1px solid var(--p17-accent-soft,rgba(192,112,90,.3)); padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.p17-vers a:hover{ color:var(--p17-accent-h); border-bottom-color:var(--p17-accent-h); }

/* ── grille des articles (page pilier) ── */
.p17-grille{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:22px; margin:2em 0;
}
/* Le thème anime un dégradé terracotta en background-image pour souligner les
   liens. Sur un lien en bloc comme la carte, il pave toute la surface et rend
   le texte illisible : on le neutralise ici, le survol restant le relief. */
.p17-carte,
.p17-carte:hover,
.p17-carte:focus,
.p17-teaser,
.p17-teaser:hover,
.p17-teaser:focus{ background-image:none !important; }

.p17-carte{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  border:1px solid var(--p17-line); border-radius:16px; background-color:var(--p17-bg);
  transition:transform .25s ease, box-shadow .25s ease;
}
.p17-carte:hover{
  transform:translateY(-3px);
  box-shadow:var(--p17-shadow,0 14px 32px rgba(51,46,42,.09));
  border-color:var(--p17-accent-soft,rgba(192,112,90,.35));
}
.p17-carte:hover .p17-carte__titre{ color:var(--p17-accent); }
.p17-carte__img{ display:block; height:158px; background:var(--p17-bg-3) center/cover no-repeat; }
.p17-carte__corps{ display:flex; flex-direction:column; gap:.55em; padding:20px 22px 22px; flex:1; }
.p17-carte__titre{ font-family:var(--p17-font-display); font-weight:600; font-size:1.08rem; color:var(--p17-text); line-height:1.3; }
.p17-carte__ex{ font-size:.9rem; line-height:1.6; color:var(--p17-text-soft); }
/* margin-top:auto pousse le lien en pied de carte : les cartes d'une ligne s'alignent */
.p17-carte__fl{ margin-top:auto; padding-top:.6em; font-size:.85rem; font-weight:600; color:var(--p17-accent); }

/* ── bandeau de clôture ── */
.p17-clore{
  margin:3em 0 0; padding:34px 36px; border-radius:16px;
  background:var(--p17-bg-3);
}
.p17-clore h3{ margin:0 0 .5em !important; color:var(--p17-text) !important; }
.p17-clore p{ color:var(--p17-text-soft) !important; margin:0 0 1.3em; max-width:44em; }
.p17-clore a{
  display:inline-block; background:var(--p17-accent); color:var(--p17-on-accent,#fff);
  font-weight:600; font-size:.95rem; text-decoration:none;
  padding:14px 28px; border-radius:99px; transition:background .2s ease;
}
.p17-clore a:hover{ background:var(--p17-accent-h); }

@media(max-width:780px){
  .p17-fiche{ grid-template-columns:1fr; gap:20px; padding:20px; }
  .p17-nutriments,.p17-note{ padding:22px; }
  .p17-note{ padding-top:30px; }
  .p17-clore{ padding:26px 22px; }
}

/* ── surcharges de fin de feuille ──────────────────────────────────
   La fiche de base déclare margin:0 !important sur le lien et arrive
   plus bas dans ce fichier : sans ces règles finales, l'alignement en
   pied de carte serait écrasé par l'ordre de cascade. */
.p17-fiches .p17-fiche__corps{ align-self:stretch; }
.p17-fiches .p17-fiche__lien{ margin:auto 0 0 !important; padding-top:.6em; }