/*******************
  PAGES — propagation de la refonte (P4, 16/10/2026)

  Pas de maquette pour ces pages : on reporte les jetons (tokens.css) et les composants
  de l'accueil et de la fiche sur les anciens gabarits, sans en changer la mise en page.
  Chargée par functions.php (shooldy_needs_pages_styles()) sur :
    - page.php (CGV, mentions, confidentialité, notices, distributeurs) ;
    - page-about.php, page-contact.php, page-pros-step1.php ;
    - blog (archive.php, single.php) ;
    - panier, commande et compte (pages WooCommerce rendues par page.php).
  Jamais sur l'accueil, la fiche produit, le styleguide ni les gabarits de P5 : ces
  règles visent les ANCIENNES classes (.title.medium, .wrapper, .box-post…), que ces
  gabarits n'emploient pas.

  Chargée après start.css : à spécificité égale elle l'emporte, sans !important.
*******************/

/* ---------------------------------------------------------------- Anciens jetons
   start.css garde des valeurs d'avant la refonte pour quelques anciens jetons : on les
   rabat sur ceux de tokens.css, le temps de ces pages. */
:root {
  --borderRadius: var(--r-bloc);   /* cartes, encarts, formulaire de contact : 2em → 18-36 px */
}
body {
  color: var(--c-ink);
}

/* ---------------------------------------------------------------- Bords de page
   Anciens .wrapper : 2 gouttières (96 px à 1440) → la marge des sections de l'accueil
   (--side, 41 px à 1440, 16 px à 390). Les sections pleines (`small-padding`) prennent
   le bord des cartes de l'accueil (--page-edge). Contenu de <main> seulement : le
   header (header.php, .wrapper) a ses propres cotes dans header.css. */
main .wrapper {
  padding-inline: var(--side);
}
main .wrapper.small-padding {
  padding-inline: var(--page-edge);
}
main .wrapper.no-padding {
  padding: 0;
}
/* Blocs « larges » (panier, commande) : text.css les sort d'une gouttière de chaque
   côté ; la marge étant devenue plus étroite que la gouttière, ils débordaient de la
   page (commande à 1440 : 7 px). Ils restent dans la marge (--side). */
@media screen and (min-width: 601px) {
  .gutenberg .alignwide {
    width: 100%;
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------- Titres
   Ancienne échelle en em (huge, big, medium, small, tiny) → échelle de la refonte
   (titles.css : .display, .section, .sub). L'italique IvyPresto reste celui de titles.css.
   La couleur n'est pas forcée : les titres posés sur photo restent blancs. */
.title.huge > *,
.title.big > * {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.title.medium > * {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: -0.005em;
}
.title.small > * {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-title);
}
.title.tiny > * {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
}
/* Pastilles des cartes turquoise (À propos, page pros) : petit texte, pas un titre. */
.title.tiny.boxed > * {
  font-size: var(--fs-small);
}
.title.boxed > * > span {
  border-radius: var(--r-pill);
}
/* Les anciens titres cassaient l'italique sous 1000 px (titles.css) : la refonte le
   garde en ligne, comme sur l'accueil. */
@media screen and (max-width: 1000px) {
  .title:not(.preserveBR) > * i {
    display: inline;
  }
}

/* ---------------------------------------------------------------- Texte courant */
.text.f-normal,
.gutenberg {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}
.gutenberg p,
.gutenberg ul,
.gutenberg ol {
  line-height: var(--lh-text);
}
.gutenberg h1,
.gutenberg h2,
.gutenberg h3,
.gutenberg h4,
.gutenberg h5 {
  color: var(--c-ink);
  font-family: var(--f-base);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.gutenberg h1 { font-size: var(--fs-h2); }
.gutenberg h2 { font-size: var(--fs-h3); }
.gutenberg h3 { font-size: var(--fs-h4); }
.gutenberg h4,
.gutenberg h5 { font-size: var(--fs-lead); }
.gutenberg a:not(.wp-element-button):not(.btn):not(.button) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.gutenberg .wp-block-quote.is-large,
.gutenberg blockquote {
  border-left-color: var(--c-accent);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.gutenberg .wp-block-table table {
  border-collapse: collapse;
}
.gutenberg .wp-block-table td,
.gutenberg .wp-block-table th {
  border-color: var(--c-line);
}
/* Photos arrondies ; les pictos SVG (réassurance du panier) restent entiers. */
.gutenberg .wp-block-image img:not([src$=".svg"]) {
  border-radius: var(--r-card);
}

/* ---------------------------------------------------------------- À propos (page-about.php) */
.box-intro {
  border-radius: var(--r-bloc);
  background-color: var(--c-beige);
  color: var(--c-ink);
}
.box-special .ill,
.box-default {
  border-radius: var(--r-bloc);
}
.big-hero-section {
  margin-inline: var(--page-edge);
  overflow: clip;
  border-radius: var(--r-bloc);
}

/* ---------------------------------------------------------------- Encarts vidéo des pages
   (À propos, page pros, blocs « video_file » de content-box) : la vidéo de fond couvre son
   encart sans en déborder, centrée (Antoine, 20/10) ; la vidéo d'un bloc de contenu garde
   ses proportions, à la largeur de sa colonne au plus, centrée. */
.big-intro:not(.home-intro) > .ill {
  overflow: clip;
}
.big-intro:not(.home-intro) > .ill video,
.big-hero-section .ill video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
}
.ps-video video {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* ---------------------------------------------------------------- Contact (page-contact.php)
   Champs du formulaire CF7 au dessin des champs de la refonte (form.css, lettre
   d'information du footer) : hauteur des boutons, contour à 50 %, coins --r-field. */
.contact-grid .form .inner {
  border-radius: var(--r-bloc);
  background-color: var(--c-beige);
}
.the-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.the-form select,
.the-form textarea,
.the-form.alt input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.the-form.alt select,
.the-form.alt textarea {
  min-height: var(--field-h);
  padding: 0.6em 1em;
  border: 2px solid var(--c-field-border);
  border-radius: var(--r-field);
  background-color: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-base);
  font-size: var(--fs-field);
}
.the-form textarea,
.the-form.alt textarea {
  min-height: 8em;
}
/* Champ mot de passe de l'extension B2B : place de l'œil à droite. */
.the-form .pswa-password-field > input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  padding-right: 3em;
}

/* ---------------------------------------------------------------- Onglets de l'extension B2B
   Page pros (Connexion / Inscription / Nous contacter) et espace pro : couleurs, filets et
   coins aux jetons. `body` passe devant b2b-frontend.css, dont l'ordre de chargement
   n'est pas garanti, sans dépasser ses règles `.b2b-dashboard …`. */
body .pswa-b2b-tab {
  border-color: var(--c-line);
  border-radius: var(--r-field) var(--r-field) 0 0;
  background: var(--c-beige);
  color: var(--c-ink);
  font-family: var(--f-base);
}
body .pswa-b2b-tab.active,
body .pswa-b2b-tab[aria-selected="true"] {
  background: var(--c-white);
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}
body .pswa-b2b-tab:not(.active):hover {
  background: var(--c-white);
  color: var(--c-accent);
}
body .pswa-b2b-tab-content {
  border-color: var(--c-line);
  border-radius: 0 var(--r-card) var(--r-card) var(--r-card);
}
.the-form input:focus,
.the-form select:focus,
.the-form textarea:focus {
  border-color: var(--c-accent);
  outline: none;
}
.the-form input::placeholder,
.the-form textarea::placeholder {
  color: rgba(48, 49, 67, 0.55);
}
.the-form .mandatory {
  color: var(--c-ink);
}
.the-form div.wpcf7-response-output {
  border-radius: var(--r-field);
}

/* ---------------------------------------------------------------- Blog (archive.php, single.php) */
.ps-tags a {
  border-radius: var(--r-pill);
}
.box-post,
.blog-grid .box-post {
  overflow: hidden;
  border-radius: var(--r-bloc);
}
.page-intro.w-ill .inner,
.page-intro .ill {
  border-radius: var(--r-bloc);
}
.nav-post-links a {
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: none;
}
.nav-post-links a:hover {
  color: var(--c-accent);
}

/* ---------------------------------------------------------------- Formulaires WooCommerce classiques
   Connexion /mon-compte/, mot de passe perdu, adresses et détails du compte : champs au
   dessin de la refonte. Le panier et la commande sont en blocs (règles plus bas). */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row .input-text,
.woocommerce-page form .form-row select {
  min-height: var(--field-h);
  padding: 0.6em 1em;
  border: 2px solid var(--c-field-border);
  border-radius: var(--r-field);
  background-color: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-base);
  font-size: var(--fs-field);
  line-height: 1.3;
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--c-accent);
  outline: none;
}
.woocommerce form .form-row label {
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 600;
}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
  border: 0;
  border-radius: var(--r-bloc);
  background: var(--c-beige);
  padding: clamp(18px, 2.4vw, 42px);
}
.woocommerce form .show-password-input {
  top: 50%;
  transform: translateY(-50%);
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  border-top-color: var(--c-accent);
  border-radius: var(--r-field);
  background: var(--c-beige);
  color: var(--c-ink);
}
.woocommerce .woocommerce-error {
  border-top-color: #b81c23;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  color: var(--c-accent);
}
.woocommerce table.shop_table {
  border-color: var(--c-line);
  border-radius: var(--r-card);
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-color: var(--c-line);
}

/* ---------------------------------------------------------------- Panier et commande (blocs)
   Boutons : déjà au dessin commun (buttons.css). Ici : champs, encarts et couleurs.
   Le champ maison d'estimation des frais de port (cart-shipping-estimate.js) n'est
   pas touché : seules les classes natives des blocs sont visées. */
/* `body` + `.wc-block-components-form` : égale puis dépasse d'un cran les règles des blocs
   (`.wc-block-components-form .wc-block-components-text-input input[type=…]`). */
body .wc-block-components-form .wc-block-components-text-input input[type="text"],
body .wc-block-components-form .wc-block-components-text-input input[type="email"],
body .wc-block-components-form .wc-block-components-text-input input[type="tel"],
body .wc-block-components-form .wc-block-components-text-input input[type="number"],
body .wc-block-components-form .wc-block-components-text-input input[type="password"],
body .wc-block-components-form .wc-block-components-text-input input[type="url"],
body .wc-block-components-text-input input[type="text"],
body .wc-block-components-text-input input[type="email"],
body .wc-blocks-components-select .wc-blocks-components-select__select,
body .wc-block-components-textarea {
  border: 2px solid var(--c-field-border);
  border-radius: var(--r-field);
  background-color: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-base);
}
body .wc-block-components-form .wc-block-components-text-input input:focus,
body .wc-block-components-text-input input:focus,
body .wc-blocks-components-select .wc-blocks-components-select__select:focus {
  border-color: var(--c-accent);
  box-shadow: none;
  outline: none;
}
.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label {
  color: rgba(48, 49, 67, 0.7);
  font-family: var(--f-base);
}
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
  color: var(--c-ink);
}
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
  border-color: var(--c-accent);
}
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
  background: var(--c-accent);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__option-checked,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option-checked {
  border-color: var(--c-accent);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
  border-color: var(--c-accent);
  background: var(--c-accent);
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark {
  fill: var(--c-white);
}
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child {
  color: var(--c-ink);
}
.wc-block-cart .wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-title.wc-block-components-title {
  color: var(--c-ink);
  font-family: var(--f-base);
  font-weight: 600;
}
.wc-block-components-product-name {
  color: var(--c-ink);
  font-weight: 600;
}
.wc-block-components-quantity-selector {
  border-radius: var(--r-field);
}
.wc-block-components-quantity-selector::after {
  border-color: var(--c-field-border);
  border-radius: var(--r-field);
}
.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button {
  color: var(--c-ink);
}
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
  border-color: var(--c-accent);
  border-radius: var(--r-field);
  background-color: var(--c-beige);
}
.wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-success > svg {
  background-color: var(--c-accent);
}
.wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button {
  color: var(--c-ink);
}

/* Hero des anciennes pages (À propos, page pros) : en carte, comme le hero de l'accueil
   (sous la barre du haut, bords de page, même couloir, même arrondi). */
.big-intro {
  margin: calc(var(--topbar-h) + 9px) max(var(--page-edge), calc((100% - var(--tunnel)) / 2 + var(--page-edge))) 0;
  border-radius: var(--r-bloc);
  clip-path: inset(0 round var(--r-bloc));
}
.big-intro > .content {
  min-height: clamp(560px, 46.9vw, 900px);
}
/* À propos : l'encart beige ferme le bas de la carte, sans bande de photo dessous. */
.big-intro:has(.box-intro) > .content {
  padding-bottom: 0;
}
.big-intro .box-intro {
  /* bande beige jusqu'aux bords de la carte, quelle que soit la marge du wrapper */
  box-shadow: 60px 0 0 var(--c-beige), -60px 0 0 var(--c-beige);
}
/* Page pros : bouton secondaire du hero sans contour visible (contour = couleur du fond, survol compris). */
.big-intro .btn.alt,
.big-intro .btn-container.alt a {
  --btn-bd: var(--btn-bg);
}