/* ==================================================
   WOOCOMMERCE — CE QUE SA FEUILLE FAISAIT ENCORE

   Les trois feuilles de l'extension ne sont plus
   chargées (le pourquoi et le comment sont dans
   css/include-styles.php).

   Elles habillaient une boutique : grilles de produits,
   étoiles de notation, onglets d'avis, fil d'Ariane,
   pages de catégories. Ce site n'affiche rien de tout
   cela — l'adresse d'une session renvoie vers sa fiche
   formation, et il n'existe pas d'archive boutique.

   Le tunnel, le compte et les messages sont déjà
   habillés par tunnel.css et compte.css : ces feuilles
   surchargeaient l'extension, elles la remplacent
   désormais. Ne restait qu'une poignée de fragments
   qu'elle posait sans qu'on y pense, et qu'on aurait
   redécouverts un par un en les perdant. Les voici.
================================================== */

/* --------------------------------------------------
   LE VOILE D'ATTENTE

   Pendant qu'il recalcule les totaux ou qu'il envoie la
   commande, WooCommerce pose un voile sur le bloc
   concerné (blockUI). L'opacité et le fond sont écrits
   en style en ligne par son script ; ce qui venait de
   sa feuille, c'est la roue qui tourne au milieu. Sans
   elle, l'écran se fige sans rien dire — et c'est
   précisément le moment où l'on se demande si son
   paiement est parti.
-------------------------------------------------- */

.blockUI.blockOverlay,
.woocommerce .blockUI.blockOverlay {
    position: relative;
}

.blockUI.blockOverlay::before,
.woocommerce .blockUI.blockOverlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 2px solid var(--v-bordure);
    border-top-color: var(--v-action);
    border-radius: 50%;
    animation: virages-tourne 0.8s linear infinite;
}

@keyframes virages-tourne {
    to { transform: rotate(360deg); }
}

/* Le mouvement est une information, pas une décoration : pour qui a
   demandé moins d'animations, la roue s'arrête mais reste visible. */
@media (prefers-reduced-motion: reduce) {
    .blockUI.blockOverlay::before,
    .woocommerce .blockUI.blockOverlay::before { animation: none; }
}

/* --------------------------------------------------
   LES TABLEAUX

   Le détail d'une commande, entre autres :
   WooCommerce les rend en <table class="shop_table">.
   Sans habillage, ce sont des colonnes collées les unes
   aux autres, sans filet ni respiration.

   Les moyens de paiement ont déjà leur mise en forme
   dans compte.css, où ils sont rendus dans une carte ;
   ces règles-ci valent pour tous les autres.
-------------------------------------------------- */

.woocommerce table.shop_table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    color: var(--v-texte-corps);
}

.woocommerce table.shop_table th {
    padding: 0 12px 10px 0;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
    text-align: left;
}

.woocommerce table.shop_table td {
    padding: 12px 12px 12px 0;
    border-top: 1px solid var(--v-bordure);
    vertical-align: middle;
}

.woocommerce table.shop_table th:last-child,
.woocommerce table.shop_table td:last-child { padding-right: 0; }

/* Le détail d'une commande met ses intitulés en colonne de gauche : là,
   l'en-tête n'est pas une étiquette de colonne mais de ligne. */
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot th {
    padding: 12px 12px 12px 0;
    border-top: 1px solid var(--v-bordure);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v-texte-titre);
    vertical-align: top;
}

.woocommerce table.shop_table tfoot td { text-align: right; }

/* --------------------------------------------------
   LES TABLEAUX, SUR UN TÉLÉPHONE

   Le détail d'une commande et ses colonnes ne tiennent pas dans
   350 px. Sans rien, le tableau élargit la page entière : la
   barre de défilement horizontale apparaît, et tout le site glisse de
   côté sous le doigt.

   WooCommerce réglait cela lui-même, dans woocommerce-smallscreen.css.
   Ce thème ne sert plus AUCUNE feuille de WooCommerce — voir
   css/include-styles.php, qui explique pourquoi —, et ce réglage-là
   est parti avec les autres sans que rien ne le remplace.

   On refait donc ce qu'elle faisait : chaque ligne devient un bloc, et
   chaque cellule porte son intitulé à gauche d'elle-même. L'intitulé
   vient de l'attribut `data-title` que WooCommerce pose sur chaque
   cellule ; l'en-tête de colonne, devenu inutile, se retire.
-------------------------------------------------- */

@media (max-width: 767px) {

    .woocommerce table.shop_table thead {
        /* Masqué à l'œil seulement : les intitulés reviennent cellule
           par cellule juste en dessous. */
        display: none;
    }

    .woocommerce table.shop_table,
    .woocommerce table.shop_table tbody,
    .woocommerce table.shop_table tfoot,
    .woocommerce table.shop_table tr,
    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td {
        display: block;
        width: auto;
    }

    /* Une commande = un bloc séparé du suivant par un filet, là où le
       filet séparait des lignes de tableau. */
    .woocommerce table.shop_table tbody tr {
        padding: 14px 0;
        border-top: 1px solid var(--v-bordure);
    }

    .woocommerce table.shop_table tbody tr:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .woocommerce table.shop_table td,
    .woocommerce table.shop_table tbody th {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 5px 0;
        border-top: 0;
        text-align: right;
    }

    /* L'intitulé de la colonne, remis devant sa valeur. Sans lui, on
       lirait quatre valeurs empilées sans savoir ce qu'elles disent. */
    .woocommerce table.shop_table td[data-title]::before {
        content: attr(data-title);
        flex: 0 0 auto;
        font-family: var(--v-font-corps);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--v-texte-meta);
        text-align: left;
    }

    /* Le pied — sous-total, TVA, total — garde ses deux colonnes : ce
       sont des couples intitulé/montant, déjà courts. */
    .woocommerce table.shop_table tfoot tr {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        border-top: 1px solid var(--v-bordure);
    }

    .woocommerce table.shop_table tfoot th,
    .woocommerce table.shop_table tfoot td {
        padding: 10px 0;
        border-top: 0;
    }
}

/* Les précisions rattachées à une ligne de commande — les participants,
   ici — que WooCommerce range sous l'intitulé. */
.woocommerce .wc-item-meta,
.woocommerce dl.variation {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--v-texte-meta);
}

.woocommerce .wc-item-meta li,
.woocommerce .wc-item-meta p,
.woocommerce dl.variation dt,
.woocommerce dl.variation dd { margin: 0; }

.woocommerce .wc-item-meta strong,
.woocommerce dl.variation dt {
    display: inline;
    font-weight: 600;
    color: var(--v-texte-corps);
}

/* --------------------------------------------------
   LES LOGOS DES MOYENS DE PAIEMENT

   Mollie et Stripe posent chacun leur ligne dans la
   liste des moyens de paiement, avec le logo de la
   marque en image : Bancontact, iDEAL, Visa. Ces
   images-là n'ont aucune dimension propre, et c'est la
   feuille de WooCommerce qui les tenait à 24 pixels de
   haut.

   Sans cette règle, chaque logo s'affiche à sa taille
   naturelle au milieu de la carte de paiement — sur la
   dernière page avant de payer, ce qui est le pire
   endroit du site pour une surprise. La liste des
   moyens, elle, est habillée dans tunnel.css.
-------------------------------------------------- */

.woocommerce-checkout #payment ul.payment_methods li img {
    max-height: 24px;
    width: auto;
    margin: -2px 0 0 8px;
    padding: 0;
    vertical-align: middle;
    box-shadow: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    width: auto;
    margin: 0 8px 0 0;
    accent-color: var(--v-action);
}

/* --------------------------------------------------
   PAGINATION DES COMMANDES
-------------------------------------------------- */

.woocommerce .woocommerce-pagination {
    margin: 18px 0 0;
}

.woocommerce .woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce .woocommerce-pagination a,
.woocommerce .woocommerce-pagination span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--v-texte-corps);
    text-decoration: none;
}

.woocommerce .woocommerce-pagination .current {
    background: var(--v-action);
    border-color: var(--v-action);
    color: var(--v-texte-inverse);
}

/* --------------------------------------------------
   LES DEUX COLONNES DE WOOCOMMERCE

   « Mes adresses » et le détail d'une commande se
   présentent en col2-set / col-1 / col-2. Ces deux
   derniers noms sont aussi ceux de la grille Bootstrap,
   qui les entend comme « une colonne sur douze » : les
   blocs tombaient alors à 8 % de large. La feuille de
   WooCommerce l'emportait par sa spécificité ; c'est
   maintenant à nous de le faire.
-------------------------------------------------- */

.woocommerce .col2-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
}

@media (max-width: 767px) {
    .woocommerce .col2-set { grid-template-columns: minmax(0, 1fr); }
}

.woocommerce .woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.woocommerce .woocommerce-Address-title h2,
.woocommerce .woocommerce-Address-title h3 {
    margin: 0 0 8px;
    font-family: var(--v-font-titre);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.woocommerce .woocommerce-Address address {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-style: normal;
    line-height: 1.6;
    color: var(--v-texte-corps);
}

/* --------------------------------------------------
   LA FORCE DU MOT DE PASSE

   Le témoin qu'ajoute le script de WooCommerce sous un
   champ de mot de passe. Ses couleurs venaient de sa
   feuille : sans elles, un bandeau nu qui dit « faible »
   du même gris que « fort ».
-------------------------------------------------- */

.woocommerce-password-strength,
.woocommerce-password-hint {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: var(--v-radius-sm);
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.woocommerce-password-strength { font-weight: 600; }

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
    background: var(--v-urgence-fond);
    color: var(--v-urgence);
}

.woocommerce-password-strength.good {
    background: var(--v-turquoise-100);
    color: var(--v-turquoise-700);
}

.woocommerce-password-strength.strong {
    background: var(--v-turquoise-100);
    color: var(--v-turquoise-700);
}

.woocommerce-password-hint {
    padding: 0;
    color: var(--v-texte-meta);
}

/* --------------------------------------------------
   CHAMPS ET MENTIONS

   Ce qui vaut partout où WooCommerce rend un formulaire
   sans que nous ayons prévu de grille — « Mes adresses »,
   l'ajout d'un moyen de paiement. Le sélecteur est
   volontairement faible : là où une carte range déjà ses
   champs en grille, c'est elle qui doit gagner, et sa
   règle est moins spécifique que celles de WooCommerce.
-------------------------------------------------- */

form .form-row {
    display: block;
    margin: 0 0 14px;
    padding: 0;
}

form .form-row label {
    display: block;
    margin-bottom: 6px;
}

form .form-row-wide { width: 100%; }

/* L'astérisque des champs obligatoires. Sur fond clair, le rose de
   l'urgence dit « attention » là où il ne s'agit que de signaler. */
.woocommerce .required,
.woocommerce abbr.required {
    border: none;
    color: var(--v-texte-meta);
    text-decoration: none;
}

.woocommerce .optional { color: var(--v-texte-meta); }

/* Les conditions générales, au-dessus du bouton de commande. */
.woocommerce-terms-and-conditions-wrapper {
    margin: 0 0 16px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--v-texte-meta);
}

.woocommerce-terms-and-conditions-wrapper a { color: var(--v-action); }

.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--v-texte-corps);
    cursor: pointer;
}

.woocommerce form .woocommerce-form__input-checkbox {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--v-action);
}

/* --------------------------------------------------
   LES PRIX

   Un prix barré suivi du nouveau : sans habillage, le
   navigateur souligne le second — deux traits pour dire
   une remise, dont un qui ressemble à un lien.
-------------------------------------------------- */

.woocommerce del {
    margin-right: 6px;
    color: var(--v-texte-meta);
    text-decoration: line-through;
}

.woocommerce ins {
    background: none;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce .woocommerce-Price-amount { white-space: nowrap; }

/* --------------------------------------------------
   LES LISTES

   Celles de WooCommerce n'ont pas de puces : ce sont des
   suites d'informations, pas des énumérations.

   Pas de clearfix ici, contrairement à la feuille
   d'origine : ce qu'elle refermait, ce sont ses blocs
   flottants — les deux colonnes du compte et celles des
   adresses — que nous posons en flex et en grille.
   Ajouter un ::after à un conteneur flex n'y refermerait
   rien : il y créerait un enfant vide de plus, et la
   gouttière qui va avec.
-------------------------------------------------- */

.woocommerce ul.order_details,
.woocommerce ul.woocommerce-order-overview {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}