/* ============================================================
   IciOnDeal — Sections fiche produit fp3- (design validé sur mockup)
   Restyle des sections existantes (déjà alimentées par pdp_content ou
   par du contenu fixe, aucune nouvelle donnée, aucun nouveau champ admin) :
   Fonctionnalités / Comment ça marche / Caractéristiques techniques /
   Compatibilité / Confiance / Pour qui pour quoi / Contenu / Questions
   fréquentes. Accent = vert du site (--fp3-accent, aligné sur --green/
   --ds-primary #00d084 déjà utilisé partout ailleurs sur cette page),
   pas le jaune du mockup initial — toutes les sections fp3- doivent rester
   cohérentes entre elles.

   Titres en <div> plutôt qu'en <h2>/<h3> : assets/css/design-system.css
   force globalement `h2/h3/h4{font-size:...!important}` à plusieurs
   breakpoints (mobile et tablette) — un !important ne peut être battu que
   par un autre !important, interdit ici. On évite le conflit par la
   structure des sélecteurs (tag différent) plutôt que par !important,
   comme demandé.
   ============================================================ */

@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

/* Chaque section (steps/specs/uses) est son propre scope racine — pas de
   wrapper commun autour des trois, elles s'intercalent parmi les autres
   sections existantes de la description (compatibilité, blocs zigzag...). */
.fp3-section{
  --fp3-panel:#fbfaf9;
  --fp3-card:#f0efed;
  --fp3-ink:#1d1d1f;
  --fp3-muted:#8e8d8a;
  --fp3-label:#a8a7a4;
  --fp3-black:#161616;
  --fp3-accent:#00d084;
  --fp3-line:#e4e2df;
  font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--fp3-ink);
  -webkit-font-smoothing:antialiased;
}
.fp3-section *{box-sizing:border-box;}

.fp3-sec-head{display:flex;align-items:center;gap:12px;margin:0 0 14px;}
.fp3-sec-head::before{content:"";width:4px;height:18px;background:var(--fp3-accent);border-radius:2px;flex-shrink:0;}
.fp3-sec-head .fp3-sec-title{font-size:13px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#3a3a3c;white-space:nowrap;margin:0;}
.fp3-sec-head::after{content:"";height:1px;background:var(--fp3-line);flex:1;}

.fp3-panel{background:var(--fp3-panel);border-radius:14px;padding:26px 22px;}

/* Comment ça marche */
.fp3-steps{display:flex;flex-direction:column;gap:26px;}
.fp3-step{display:flex;gap:16px;align-items:flex-start;}
.fp3-step-num{
  width:38px;height:38px;flex-shrink:0;border-radius:10px;
  background:var(--fp3-black);color:var(--fp3-accent);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;
}
.fp3-step .fp3-step-title{font-size:16.5px;font-weight:700;margin:0 0 6px;}
.fp3-step p{font-size:14.5px;line-height:1.6;color:var(--fp3-muted);margin:0;}

/* Caractéristiques techniques */
.fp3-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.fp3-spec{background:var(--fp3-card);border-radius:12px;padding:24px 12px 20px;text-align:center;}
.fp3-spec .val{font-size:25px;font-weight:700;letter-spacing:.01em;margin-bottom:8px;display:block;}
.fp3-spec .lab{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--fp3-label);display:block;}

/* Pour qui, pour quoi */
.fp3-uses{display:flex;flex-direction:column;gap:14px;}
.fp3-use{background:var(--fp3-card);border-radius:12px;padding:20px 18px;display:flex;gap:16px;align-items:flex-start;}
.fp3-use-ico{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--fp3-black);display:flex;align-items:center;justify-content:center;}
.fp3-use-ico svg{width:22px;height:22px;stroke:var(--fp3-accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.fp3-use .fp3-use-title{font-size:16px;font-weight:700;margin:0 0 6px;}
.fp3-use p{font-size:14.5px;line-height:1.6;color:var(--fp3-muted);margin:0;}

/* Fonctionnalités ("Ce que fait ce produit") — même item que .fp3-step (badge numéroté),
   disposés en grille plutôt qu'en liste verticale. */
.fp3-feats{display:grid;grid-template-columns:1fr;gap:22px;}
.fp3-feats .fp3-step{align-items:flex-start;}

/* Compatibilité / Contenu — pastilles (même composant pour les deux sections) */
.fp3-chips{display:flex;flex-wrap:wrap;gap:8px;}
.fp3-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--fp3-card);border-radius:999px;
  padding:8px 16px;font-size:13.5px;font-weight:500;
}

/* Confiance — même carte que .fp3-use (carré noir + icône + titre + texte), grille 2 colonnes
   fixe (y compris mobile, comme l'ancien .fp-guarantee-grid). */
.fp3-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.fp3-trust .fp3-use{flex-direction:column;text-align:center;align-items:center;padding:22px 14px;}
.fp3-trust .fp3-use-ico{margin-bottom:4px;}
.fp3-trust .fp3-use-title{font-size:14px;}
.fp3-trust p{font-size:13px;}

/* Questions fréquentes — accordéon natif <details>/<summary>, zéro JS requis */
.fp3-faq{display:flex;flex-direction:column;gap:10px;}
.fp3-faq-item{background:var(--fp3-card);border-radius:12px;padding:2px 18px;}
.fp3-faq-item summary{
  padding:16px 0;font-size:15px;font-weight:700;cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.fp3-faq-item summary::-webkit-details-marker{display:none;}
.fp3-faq-item summary::after{
  content:"+";flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:var(--fp3-black);color:var(--fp3-accent);
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
}
.fp3-faq-item[open] summary::after{content:"–";}
.fp3-faq-item p{font-size:14.5px;line-height:1.6;color:var(--fp3-muted);margin:0 0 16px;}

/* Tablette */
@media (min-width:768px){
  .fp3-panel{padding:34px 32px;}
  .fp3-specs{grid-template-columns:repeat(3,1fr);}
  .fp3-uses{display:grid;grid-template-columns:repeat(2,1fr);}
  .fp3-feats{grid-template-columns:repeat(2,1fr);}
}
/* Desktop */
@media (min-width:1024px){
  .fp3-specs{grid-template-columns:repeat(4,1fr);}
  .fp3-steps{gap:30px;}
  .fp3-trust{grid-template-columns:repeat(4,1fr);}
}