/* Pages de guide et de categorie.
   Le site a deux coquilles : la page d'accueil (plein ecran, hero) et les
   fiches produit (colonne editoriale). Ces pages de guide sont un troisieme
   gabarit : meme en-tete et meme pied, corps sur colonne de lecture, pour
   qu'un article de 1 200 mots reste lisible sans deborder sur mobile. */

.seo-page {
  --colonne: 74ch;
  max-width: calc(100% - 48px);
  margin-inline: auto;
  padding-block: 56px 96px;
}

.seo-page > * { max-width: var(--colonne); }

/* --- fil d'Ariane ---------------------------------------------------- */
.fil-ariane {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: #8d95b2;
  margin-bottom: 34px;
}
.fil-ariane a { color: #aab2cc; text-decoration: none; }
.fil-ariane a:hover { color: #fff; }
.fil-ariane > * + *::before {
  content: '›'; margin-right: 8px; opacity: .5;
}
.fil-ariane [aria-current] { color: #6f7794; }

/* --- titres ---------------------------------------------------------- */
.seo-oeil {
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--lime, #b9ff3c);
  margin-bottom: 14px;
}
.seo-page h1 {
  font-size: clamp(34px, 5vw, 58px); line-height: 1.06;
  letter-spacing: -.035em; font-weight: 800; margin: 0 0 22px;
  color: #fff;
}
.seo-chapo {
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6;
  color: #c3cbe4; margin-bottom: 40px;
}
.seo-page h2 {
  font-size: clamp(23px, 2.4vw, 30px); line-height: 1.18;
  letter-spacing: -.02em; font-weight: 800; color: #fff;
  margin: 56px 0 18px; padding-top: 22px;
  border-top: 1px solid rgba(140,160,220,.16);
}
.seo-page h2 em { color: var(--lime, #b9ff3c); font-style: italic; }
.seo-page h3 {
  font-size: 19px; font-weight: 700; color: #fff;
  margin: 32px 0 10px;
}
.seo-page p { line-height: 1.72; color: #b9c1da; margin: 0 0 18px; }
.seo-page strong { color: #fff; font-weight: 700; }
.seo-page em { color: #dfe6f7; }
.seo-page a { color: #7fd4ff; }

/* --- listes ---------------------------------------------------------- */
.seo-page ul, .seo-page ol { padding-left: 22px; margin: 0 0 22px; }
.seo-page li { line-height: 1.7; color: #b9c1da; margin-bottom: 10px; }
.seo-page li::marker { color: #5c6688; }

/* --- reponse courte : forme visee par les moteurs generatifs --------- */
.seo-reponse {
  border-left: 3px solid var(--lime, #b9ff3c);
  background: rgba(185,255,60,.05);
  padding: 22px 26px; border-radius: 0 12px 12px 0;
  margin-bottom: 34px;
}
.seo-question {
  font-weight: 800; color: #fff; font-size: 17px;
  margin-bottom: 10px !important;
}
.seo-reponse p:last-child { margin-bottom: 0; }

/* --- encadre legal --------------------------------------------------- */
.seo-encadre {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(140,160,220,.18);
  border-radius: 14px; padding: 22px 26px; margin: 32px 0;
}
.seo-encadre-titre {
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #ffb27a; margin-bottom: 10px !important;
}
.seo-encadre p:last-child { margin-bottom: 0; }

/* --- fiches produit liees -------------------------------------------- */
.seo-produits {
  list-style: none; padding: 0; margin: 24px 0 30px;
  display: grid; gap: 10px;
}
.seo-carte a {
  display: grid; gap: 4px; text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(140,160,220,.15);
  border-radius: 12px; padding: 16px 18px;
  transition: border-color .18s, background .18s, transform .18s;
}
.seo-carte a:hover {
  border-color: rgba(127,212,255,.5);
  background: rgba(127,212,255,.07);
  transform: translateY(-2px);
}
.seo-carte strong { color: #fff; font-size: 17px; }
.seo-carte-note { color: #9aa3c0; font-size: 14px; }
.seo-carte-univ {
  color: #6f7794; font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}

/* --- tableau --------------------------------------------------------- */
.seo-tableau { overflow-x: auto; margin: 24px 0 30px; max-width: 100%; }
.seo-tableau table { width: 100%; border-collapse: collapse; font-size: 15px; }
.seo-tableau th {
  text-align: left; padding: 12px 14px;
  background: rgba(255,255,255,.06);
  color: #fff; font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(140,160,220,.25);
  white-space: nowrap;
}
.seo-tableau td {
  padding: 12px 14px; color: #b9c1da;
  border-bottom: 1px solid rgba(140,160,220,.1);
}
.seo-tableau tr:hover td { background: rgba(255,255,255,.025); }

/* --- lien de suite --------------------------------------------------- */
.seo-suite {
  padding: 16px 20px; margin: 12px 0;
  background: rgba(127,212,255,.06);
  border-radius: 12px; border: 1px solid rgba(127,212,255,.18);
}
.seo-suite a { font-weight: 700; }

/* --- hub ------------------------------------------------------------- */
.seo-hub {
  margin-top: 64px; padding-top: 32px;
  border-top: 1px solid rgba(140,160,220,.16);
  max-width: none;
}
.seo-hub-titre {
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: #6f7794; margin-bottom: 14px !important;
}
.seo-hub ul {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;
}
.seo-hub li a {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(140,160,220,.2);
  color: #cfd6ea; text-decoration: none; font-size: 14px; font-weight: 600;
}
.seo-hub li a:hover { border-color: rgba(127,212,255,.5); color: #fff; }

/* --- mobile ---------------------------------------------------------- */
@media (max-width: 720px) {
  .seo-page { padding-block: 34px 68px; max-width: calc(100% - 36px); }
  .seo-chapo { margin-bottom: 30px; }
  .seo-page h2 { margin-top: 44px; }
  .seo-reponse { padding: 18px 18px; }
  .seo-encadre { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .seo-carte a:hover { transform: none; }
}
/* --- maillage de pied de page ---------------------------------------
   Injecte dans les 44 pages par brancher_maillage.py. Seul le bloc lui
   meme est style ici ; le reste de seo.css ne concerne que les pages de
   guide, qui chargent cette feuille en plus de style.css. */
.seo-footer{
  display:grid; gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding:34px 0 26px; margin-top:22px;
  border-top:1px solid rgba(140,160,220,.18);
  text-align:left;
}
.seo-footer-groupe p{
  font-size:10px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:#7a83a3; margin:0 0 12px;
}
.seo-footer-groupe ul{ list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.seo-footer-groupe a{
  color:#aab2cc; text-decoration:none; font-size:13px; line-height:1.5;
}
.seo-footer-groupe a:hover{ color:#fff; }
@media (max-width:720px){
  .seo-footer{ grid-template-columns:repeat(2,1fr); gap:22px; padding-top:26px; }
}

/* --- navigation de l'en-tete --------------------------------------
   Les pages de guide ne chargent PAS product.css, qui est la feuille
   qui stylait .product-topnav. Sans cette regle, la navigation de
   l'en-tete reste au style navigateur : les liens se collent les uns
   aux autres ("CollectionLe systemeTarifs"). Mesure sur les 80 pages,
   a 1440 px comme a 390 px. */
.product-topnav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--txt-soft);
  font-size: 13px;
  font-weight: 700;
}
.product-topnav a:hover { color: var(--cyan); }

/* --- en-tete sur petit ecran ---------------------------------------
   product.css masque .product-topnav sous 700 px. Les pages de guide ne
   chargent pas product.css -- elles n'en ont pas besoin pour le corps,
   mais SANS cette regle la navigation reste visible et pousse
   l'en-tete hors cadre : 37 px de defilement horizontal mesure sur
   iPhone 13 (390 px). */
@media (max-width: 700px) {
  .product-topnav { display: none; }
}

/* --- titres longs -------------------------------------------------
   Les noms de molecules sont des mots insecables de 20 a 24
   caracteres ("tetahydrocannabinolique"). Sans autoriser la coupe,
   le mot deborde de sa propre boite : mesure sur /thcv (391 px de
   contenu dans une boite de 354 px) et /thca (412 px), soit 19 et
   40 px de defilement horizontal en 390 px. */
h1, h2, h3, .seo-h1, .seo-h2 { overflow-wrap: break-word; }


/* --- sources officielles ------------------------------------------
   Les liens vers l'ANSM et l'ARS sont des liens EXTERNES : ils doivent
   se lire comme tels, sinon le lecteur les prend pour des pages du site
   et ne les ouvre pas. Trait de titre + fleche + mention "lien externe"
   sous chaque entree. */
.seo-sources {
  list-style: none;
  margin: 18px 0 4px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.seo-sources li {
  border-left: 2px solid var(--cyan);
  padding-left: 14px;
}
.seo-sources a {
  display: inline-block;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(20, 40, 91, .35);
}
.seo-sources a:hover { color: var(--cyan); }
.seo-sources a::after {
  content: " ↗";
  font-size: .85em;
  opacity: .7;
}
.seo-source-meta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--txt-soft);
  opacity: .85;
}