/* -----------------------------------------------------------------------------
 * page.css — geometrie des routes qui retombent sur GeneratePress.
 *
 * POURQUOI CE FICHIER EXISTE
 * Le theme enfant n'a pas de page.php : seules cinq routes ont un template
 * dedie (front-page, archive-product, single-product, archive/single gbs_bundle).
 * Tout le reste — pages WordPress, /my-account/, /panier/, recherche, 404 — est
 * rendu par le page.php du PARENT GeneratePress, dont la feuille est dequeuee
 * (functions.php:23 puis :74). Ces routes n'avaient donc AUCUN conteneur.
 * Mesure du 2026-08-15 dans le navigateur : le titre de /faqs/ sortait a x=-29,
 * le formulaire de /my-account/ a x=0 sur 1280 px de large, sans gouttiere.
 *
 * POURQUOI SUR .content-area ET PAS SUR .gbs-shell
 * Le max-width du site vit sur .gbs-shell (base.css), posee A LA MAIN dans chaque
 * template. L'ajouter au markup de GeneratePress supposerait d'ajouter un page.php
 * au theme, donc de reprendre la main d'un coup sur toutes ces routes. On reporte
 * plutot la meme geometrie, aux memes valeurs et aux memes points de rupture, sur
 * .content-area — le wrapper que GeneratePress emet.
 *
 * POURQUOI C'EST SANS RISQUE AILLEURS
 * .content-area est absente des cinq templates dedies. Sonde fetch du 2026-08-15 :
 * 0 occurrence sur / et /shop/, 1 sur /my-account/, /panier/ et /checkout/. Ces
 * regles sont donc inertes sur les routes bespoke. Le :not(.gbs-main--checkout)
 * est la seconde garde : le tunnel est en pleine largeur volontaire
 * (checkout.css, .gbs-main--checkout{max-width:none;padding:0}) et ne doit jamais
 * heriter d'un conteneur. La condition d'enqueue exclut deja is_checkout(), les
 * deux moities sont redondantes exprès — une seule regression d'un cote laisse
 * l'autre debout.
 *
 * RAPPEL DE GRAISSE (en-tete de base.css) : une seule face est declaree (Book 400)
 * avec font-synthesis:none. Tous les font-weight du theme sont INERTES. La
 * hierarchie visuelle ci-dessous ne repose donc que sur la taille, le
 * letter-spacing et la couleur ; les font-weight sont conserves par convention.
 * -------------------------------------------------------------------------- */

/* Geometrie : valeurs reprises telles quelles de .gbs-shell (base.css). */
.gbs-main:not(.gbs-main--checkout) .content-area {
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
  padding-block: clamp(40px, 5vw, 72px);
}

@media (max-width: 900px) {
  .gbs-main:not(.gbs-main--checkout) .content-area { width: min(calc(100% - 30px), 760px); }
}

@media (max-width: 480px) {
  .gbs-main:not(.gbs-main--checkout) .content-area { width: calc(100% - 24px); }
}

/* GeneratePress imbrique <main class="site-main"> dans le <main class="gbs-main">
   du theme, les deux avec id="main" : deux <main> et un id duplique. C'est un
   defaut de structure qu'un correctif CSS ne repare pas (il faudrait un page.php).
   On neutralise au moins les marges heritees pour que la colonne soit franche. */
.content-area .site-main,
.content-area > article,
.content-area .inside-article { margin: 0; padding: 0; }

/* ---------------------------------------------------------------------------
 * Contenu editorial (/a-propos/, /faqs/, /contact/, mentions, articles).
 * Colonne de lecture : 1320 px de conteneur donneraient des lignes de plus de
 * 200 caracteres. On borne la MESURE, pas le conteneur, pour que les pages
 * WooCommerce (qui ont leur propre mise en page) gardent la pleine largeur.
 * Discriminant : la classe body .woocommerce-page, posee par WooCommerce sur
 * /my-account/, /panier/ et /checkout/ — pas de :has(), pas de JS.
 *
 * Limite connue et assumee : /faqs/ (65 blocs) et /contact/ (10) sont batis en
 * WPBakery, dont le CSS ET le JS sont dequeues (functions.php:74-82). Leurs
 * accordeons sont deja aplatis en texte suivi ; ce fichier leur rend une colonne
 * lisible, il ne restaure pas les accordeons.
 * ------------------------------------------------------------------------- */
body:not(.woocommerce-page) .content-area .entry-content {
  max-width: 76ch;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}

body:not(.woocommerce-page) .content-area .entry-content > * { margin-block: 0 18px; }
body:not(.woocommerce-page) .content-area .entry-content > *:last-child { margin-bottom: 0; }

/* TOUT le bloc typographique ci-dessous est scope par body:not(.woocommerce-page).
   Sans ce garde, il fuit sur /my-account/ et /panier/, qui ont leur propre mise en
   page : constate le 2026-08-15 en ligne, .content-area .entry-content table th
   mettait en majuscules les libelles du panneau de totaux du panier, et la regle
   sur `a` soulignait des liens deja traites par account.css / cart.css. Les seules
   regles volontairement NON scopees de ce fichier sont la geometrie du conteneur,
   les notices WooCommerce et l'anneau de mise au point — communes a toutes ces
   routes. */
body:not(.woocommerce-page) .content-area .entry-content h1,
body:not(.woocommerce-page) .content-area .entry-content h2,
body:not(.woocommerce-page) .content-area .entry-content h3,
body:not(.woocommerce-page) .content-area .entry-content h4 {
  color: var(--ink);
  text-wrap: balance;
}

body:not(.woocommerce-page) .content-area .entry-content h1 {
  margin: 0 0 22px;
  font-size: clamp(38px, 4.3vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.05em;
}

body:not(.woocommerce-page) .content-area .entry-content h2 {
  margin: 44px 0 14px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}

body:not(.woocommerce-page) .content-area .entry-content h3 {
  margin: 32px 0 10px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
}

body:not(.woocommerce-page) .content-area .entry-content h4 {
  margin: 26px 0 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}

body:not(.woocommerce-page) .content-area .entry-content p { margin: 0 0 18px; }
body:not(.woocommerce-page) .content-area .entry-content > p:last-child { margin-bottom: 0; }

body:not(.woocommerce-page) .content-area .entry-content a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

body:not(.woocommerce-page) .content-area .entry-content a:hover { color: var(--green-dark); }

/* Les regles `.vc_tta-panel-title a` qui vivaient ici sont supprimees : elles rattrapaient
   un accordeon WPBakery casse (JS dequeue -> les 9 titres de /faqs/ ne faisaient RIEN au
   clic, panneaux figes deplies). Le contournement notait « corriger l'accordeon lui-meme
   demande de restaurer le JS ou de convertir le contenu — hors de ce lot ». C'est fait :
   /faqs/ et /contact/ ont desormais leurs propres templates (page-faqs.php, page-contact.php)
   et l'accordeon est un <details>/<summary> natif, ouvrable au clavier sans JS. */

body:not(.woocommerce-page) .content-area .entry-content ul,
body:not(.woocommerce-page) .content-area .entry-content ol { margin: 0 0 18px; padding-inline-start: 22px; }
body:not(.woocommerce-page) .content-area .entry-content li { margin-block: 6px; }

body:not(.woocommerce-page) .content-area .entry-content blockquote {
  margin: 24px 0;
  padding: 2px 0 2px 20px;
  border-inline-start: 2px solid var(--line-strong);
  color: var(--muted);
}

body:not(.woocommerce-page) .content-area .entry-content hr { margin: 34px 0; border: 0; border-top: 1px solid var(--line); }

body:not(.woocommerce-page) .content-area .entry-content img { border-radius: 14px; }

body:not(.woocommerce-page) .content-area .entry-content figure { margin: 24px 0; }

/* Un tableau editorial deborde la colonne sur mobile : il defile dans sa propre
   boite, jamais le body (le body est verifie a scrollWidth === clientWidth). */
body:not(.woocommerce-page) .content-area .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

body:not(.woocommerce-page) .content-area .entry-content table th,
body:not(.woocommerce-page) .content-area .entry-content table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: start;
}

body:not(.woocommerce-page) .content-area .entry-content table th { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
 * Notices WooCommerce.
 * Leurs icones et leur mise en forme venaient de woocommerce-general.css, que le
 * theme supprime entierement (functions.php:148). Sans ces regles, une notice
 * s'affiche en liste a puces nue, et le ::before laisse un carre vide. Patron
 * repris de checkout.css (memes fonds, meme rayon de 14 px).
 * ------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: 14px;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; display: none; }

.woocommerce-message {
  border: 1px solid rgba(33, 94, 75, .28);
  background: var(--green-soft);
  color: var(--green-dark);
}

.woocommerce-info {
  border: 1px solid var(--line-strong);
  background: var(--ivory);
  color: var(--ink-soft);
}

.woocommerce-error {
  border: 1px solid #cc8277;
  background: #fff1ef;
  color: #74281f;
}

/* .woocommerce-error est un <ul> : en flex-row, chacun de ses <li> devient un item
   et deux erreurs distinctes se retrouvent cote a cote sur la meme ligne (constate
   le 2026-08-15 avec « mot de passe incorrect » + « e-mail deja utilise »). Elles
   doivent s'empiler. Les variantes message/info, elles, restent en ligne : ce sont
   des <div> texte + bouton, ou la disposition en ligne est la bonne. */
.woocommerce-error { flex-direction: column; align-items: stretch; gap: 6px; }
.woocommerce-error li { margin: 0; }

/* Le lien d'action d'une notice (« Voir le panier ») est un .button Woo non style. */
.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover { background: rgba(23, 23, 19, .06); }

/* Anneau de mise au point. --focus (#937b42) n'existe PAS dans le base.css
   actuellement deploye — verifie le 2026-08-15, 0 occurrence dans la feuille
   servie, contre 8 dans la lignee storefront-cvr non deployee. Sans repli, la
   declaration serait invalide et l'anneau disparaitrait. La valeur de repli est
   celle documentee en tete de base.css (>= 3:1 sur les creme, WCAG 2.2 1.4.11) ;
   --gold plafonne a 2,15:1 et ne convient pas. */
.content-area a:focus-visible,
.content-area button:focus-visible,
.content-area input:focus-visible,
.content-area select:focus-visible,
.content-area textarea:focus-visible {
  outline: 3px solid var(--focus, #937b42);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Templates de pages editoriales v30 (page-contact.php, page-faqs.php,
   template-parts/page-shortcode.php). Remplacent le rendu WPBakery.

   Uniquement des tokens de base.css — aucune couleur en dur. Proprietes logiques
   partout (`margin-inline`, `padding-inline`, `inset-inline`) pour que les routes
   /ar/ en RTL restent correctes.

   GRAISSE INERTE (cf. en-tete de ce fichier et de base.css) : une seule face est
   declaree, Book 400, avec font-synthesis:none — tout `font-weight` ci-dessous ne
   change RIEN a l'ecran. La hierarchie ne tient donc qu'a la taille, au
   letter-spacing, a la couleur et aux capitales. Verifie : les 7 regles qui posent
   un font-weight portent toutes au moins un autre discriminant. Si tu ajoutes une
   regle ici, ne compte jamais sur le gras seul pour distinguer deux niveaux.

   Ces templates n'emettent PAS de `.content-area` (ils remplacent le page.php du
   parent), donc la geometrie `.content-area` du haut de ce fichier leur est inerte :
   c'est `.gbs-shell` qui porte le conteneur, comme dans front-page.php.
   ───────────────────────────────────────────────────────────────────────────── */

.gbs-main--page .gbs-section { padding-block: clamp(48px, 7vw, 86px); }

.gbs-contact__head,
.gbs-faq__head,
.gbs-scpage__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 54px); }

.gbs-contact__head h1,
.gbs-faq__head h1,
.gbs-scpage__head h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.gbs-contact__lede,
.gbs-faq__lede,
.gbs-scpage__lede { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* ── Contact ─────────────────────────────────────────────────────────────── */

.gbs-contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
}

.gbs-contact__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.gbs-contact__card--lead { background: var(--ivory); border-color: var(--line-strong); }

.gbs-contact__card h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}

.gbs-contact__card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.gbs-contact__card .gbs-button { margin-top: 10px; }

.gbs-contact__value {
  margin-top: 6px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  overflow-wrap: anywhere;
}

.gbs-contact__value:hover { color: var(--green); text-decoration-color: currentColor; }

.gbs-contact__socials {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.gbs-contact__socials p {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.gbs-contact__socials ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }

.gbs-contact__socials a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
}

.gbs-contact__socials a:hover { color: var(--green); border-color: var(--green); }
.gbs-contact__socials svg { width: 20px; height: 20px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.gbs-faq__list { border-top: 1px solid var(--line); }

.gbs-faq__item { border-bottom: 1px solid var(--line); }

.gbs-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding-block: 20px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
}

.gbs-faq__item summary::-webkit-details-marker { display: none; }
.gbs-faq__item summary:hover { color: var(--green); }

.gbs-faq__item summary svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform .18s ease;
}

.gbs-faq__item[open] summary svg { transform: rotate(180deg); }

.gbs-faq__answer { padding-bottom: 24px; max-width: 760px; color: var(--ink-soft); }
.gbs-faq__answer p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; }
.gbs-faq__answer p:last-child { margin-bottom: 0; }
.gbs-faq__answer ul { margin: 0; padding-inline-start: 20px; }
.gbs-faq__answer li { margin-block: 7px; font-size: 15px; line-height: 1.6; }
.gbs-faq__answer strong { font-weight: 800; color: var(--ink); }

.gbs-faq__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 44px;
  padding: 30px;
  background: var(--stone);
  border-radius: var(--radius);
}

.gbs-faq__cta h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.035em; }
.gbs-faq__cta p { margin: 0; color: var(--muted); font-size: 14px; }
.gbs-faq__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Pages a shortcode unique (marques, promotions) ──────────────────────── */

.gbs-scpage__body > :first-child { margin-block-start: 0; }
.gbs-scpage__body > :last-child { margin-block-end: 0; }

/* La grille WooCommerce est deja rendue en cartes v30 par le theme : on ne
   redecore pas, on retire seulement les marges parasites du wrapper. */
.gbs-scpage--products .gbs-scpage__body ul.products { margin: 0; padding: 0; }

@media (max-width: 600px) {
  .gbs-contact__socials { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gbs-faq__cta { padding: 22px; }
}

/* ═══ Surfaces heritees — cibles tactiles ═════════════════════════════════════════════════════
   Ces routes n'ont pas de gabarit du thème : /promotions/, /blog/, /?s=, les articles et les
   pages editoriales. Elles retombent sur `page.php` de GeneratePress et sur la boucle
   WooCommerce par defaut. `page.css` est la SEULE feuille du thème chargee sur les cinq
   (mesure des <link> servis : brands, base, mega, tone, page), d'ou ce bloc unique.

   1. BOUCLE WOOCOMMERCE BRUTE (/promotions/, 35 produits).
   Mesure a 390 px : les 35 boutons « Ajouter au panier » calculaient 130x21 px avec
   `padding:0`, fond transparent, `border-radius:0` — un lien texte nu la ou le thème pose
   partout ailleurs une pilule verte. Sous les 24x24 de WCAG 2.2 AA 2.5.8, et sur la seule
   page du site dediee aux promotions.

   ⚠️ Le commentaire de la l.457 affirme que « la grille WooCommerce est deja rendue en cartes
   v30 par le thème ». C'est VRAI pour les routes converties, FAUX pour /promotions/ : mesure du
   servi le 2026-08-15, `.gbs-product-card` = 0 et `ul.products li.product` = 35. Le wrapper
   `.gbs-scpage--products` est bien pose, mais la boucle qu'il contient reste celle de Woo. On
   habille donc le bouton en reprenant les valeurs de `.gbs-button` (base.css) plutot que de
   redecorer la carte — si la conversion en cartes v30 arrive un jour, `ul.products` disparait
   et cette regle devient inerte d'elle-meme, sans rien casser.
   `var(--green, #215e4b)` avec repli : les lignees de ce thème divergent et une `var()` non
   resolue invaliderait toute la declaration.
   Le titre de boucle passe de 24 a 17 px : a 24 px, 35 fiches empilees donnaient une page de
   22 820 px. Mesure apres correctif : bouton 147x44, 35 boutons sous 24 px -> 0, page a
   21 584 px (-1 236 px malgre des boutons PLUS grands).

   2. PAGINATION ET NAVIGATION D'ARTICLES (GeneratePress).
   Mesure sur /?s=priorin : `a.page-numbers` calculait 9x21 px, separes de 4 px — deux numeros
   de page cote a cote tenaient dans la largeur d'un pouce. `.nav-previous a` valait 148x21.
   Mesure apres : 44x44, ecarts a 8 px, navigation a 148x44.

   NON TRAITE, deliberement : les liens d'auteur (44x21) et de categorie (128x21) de
   `.entry-meta`. Ils sont EN LIGNE dans une phrase (« Par Sarah », « Categories : ... »), cas
   que 2.5.8 exempte explicitement. Les grossir casserait la ligne de meta pour rien.
   Verifie aussi : le lien de vignette `.post-image a` mesure 366x21 mais son <img> de 366x220
   est DANS le lien — `elementFromPoint` au centre de l'image renvoie bien l'IMG, donc la cible
   reelle fait 366x220. Ce n'etait pas un defaut, seulement une boite inline mal lue. */
@media (max-width: 900px) {
  .gbs-scpage ul.products li.product a.button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 12px 20px;
    border: 1px solid var(--green, #215e4b); border-radius: 999px;
    background: var(--green, #215e4b); color: #fff;
    font-size: 13px; font-weight: 800; line-height: 1.2; text-decoration: none;
  }
  .gbs-scpage ul.products li.product .woocommerce-loop-product__title { font-size: 17px; line-height: 1.3; }

  /* Les 35 fiches s'affichaient avec leur PUCE de liste (« • Promo ! » a l'ecran) : la regle
     de la l.458 remet padding et margin a zero mais ne retire jamais le marqueur, et avec
     `padding-left:0` la puce se dessine par-dessus le contenu. Trouve a l'oeil sur une capture,
     pas par la mesure — aucune sonde de taille ne voit un ::marker. */
  .gbs-scpage ul.products,
  .gbs-scpage ul.products li.product { list-style: none; }

  .gbs-main .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .gbs-main .nav-links .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 12px;
  }
  .gbs-main .nav-previous a, .gbs-main .nav-next a { display: inline-flex; align-items: center; min-height: 44px; }
}