/*
 * Feuille unique du B2B, sans build. Mobile d'abord : les règles de base
 * visent le téléphone, les media queries ajoutent la tablette (48em) et le
 * poste (64em).
 *
 * Le thème d'une marque se résume à --couleur, posée par le gabarit depuis
 * la table marques.
 */

/* Open Sans, servie par l'application (comme l'ancien site, sans Google Fonts). */
@font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url("../vendor/open-sans/open-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-display: swap; src: url("../vendor/open-sans/open-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-display: swap; src: url("../vendor/open-sans/open-sans-latin-700.woff2") format("woff2"); }

/* Valeurs relevées sur l'ancien site (thème Bootstrap « Inspinia »). */
:root {
    --couleur: #666;
    --texte: #676a6c;
    --texte-doux: #888;
    --fond: #f3f3f4;
    --carte: #fff;
    --bordure: #e7eaec;
    --champ: #e5e6e7;
    --lien: #337ab7;
    --commande: #f8ac59;
    --ok: #2e7d32;
    --ok-fond: #b5f5b5;
    --erreur: #ed5565;
    --erreur-fond: #f2dede;
    --alerte-fond: #fcf8e3;
    --info: #31708f;
    --info-fond: #d9edf7;
    --rayon: 3px;
    --espace: 1rem;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: var(--texte);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    overflow-x: clip;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--fond);
    line-height: 1.45;
}

a { color: var(--lien); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.85rem; margin: 0 0 var(--espace); font-weight: 400; }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; font-weight: 600; }

.visuellement-cache {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* --- Logo ------------------------------------------------------------- */

.logo { display: block; max-height: 56px; max-width: 160px; }
.logo-texte {
    font-weight: 700; font-size: 1.4rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--texte); text-decoration: none;
}

/* --- Pages invité (connexion) ----------------------------------------- */

.invite-cadre {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem var(--espace);
    background: var(--carte);
}
.invite-marque .logo { max-height: 90px; max-width: 220px; }
.invite-contenu { width: 100%; max-width: 360px; }

/* --- En-tête ---------------------------------------------------------- */

.entete {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "logo utilisateur bouton"
        "commande commande commande"
        "menu menu menu";
    align-items: center;
    gap: .5rem var(--espace);
    padding: .4rem .6rem;
    background: var(--carte);
    border-bottom: 1px solid var(--bordure);
}
.entete-logo { grid-area: logo; text-decoration: none; }
.entete-utilisateur {
    grid-area: utilisateur;
    display: flex; flex-direction: column; align-items: center;
    font-size: .95rem; color: var(--texte);
    min-width: 0;
}
.entete-utilisateur strong { font-weight: 600; }
.entete-utilisateur span { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Menu repliable sans JavaScript : case à cocher + label. */
.menu-bascule { position: absolute; opacity: 0; pointer-events: none; }
.menu-bouton {
    grid-area: bouton;
    padding: .3rem .6rem; border-radius: var(--rayon);
    color: #fff; background: var(--couleur); cursor: pointer;
}
.menu-bascule:focus-visible + .menu-bouton { outline: 2px solid var(--couleur); outline-offset: 2px; }

.menu {
    grid-area: menu;
    display: none;
    flex-direction: column;
    border-top: 1px solid var(--bordure);
}
.menu-bascule:checked ~ .menu { display: flex; }
.menu a, .menu button {
    padding: .7rem .5rem;
    color: var(--texte);
    text-decoration: none;
    font: inherit; font-size: 14px; font-weight: 600; text-align: left;
    background: none; border: 0; cursor: pointer;
}
.menu a:hover, .menu button:hover { color: #333; text-decoration: none; }
.menu a.actif { color: #333; }
.menu .fa { width: 1.1em; text-align: center; margin-right: .25rem; font-size: 13px; }
.menu-deconnexion { margin: 0; }

/* « Masquer les prix » : la classe est posée sur <html> par le gabarit. */
.prix-masques .prix { visibility: hidden; }
.si-prix-masques, .prix-masques .si-prix-visibles { display: none; }
.prix-masques .si-prix-masques { display: inline; }
[x-cloak] { display: none !important; }

/* --- Contenu ---------------------------------------------------------- */

.contenu {
    flex: 1;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: var(--espace);
}

.carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-top-width: 3px;
    padding: var(--espace) 1.25rem;
    margin-bottom: var(--espace);
}
.carte-etroite { max-width: 750px; margin-left: auto; margin-right: auto; }
.carte-entete {
    display: flex; flex-wrap: wrap; gap: .5rem;
    align-items: center; justify-content: space-between;
    margin-bottom: var(--espace);
}
.carte-entete h1 { margin: 0; }

.aide { color: var(--texte-doux); font-size: .85rem; margin: .25rem 0; }

/* --- Messages --------------------------------------------------------- */

.message { padding: .6rem .8rem; border-radius: var(--rayon); margin: 0 0 var(--espace); }
.message p { margin: 0; }
.message-ok { background: var(--ok-fond); color: var(--ok); }
.message-erreur { background: var(--erreur-fond); color: var(--erreur); }
.message-alerte { background: var(--alerte-fond); color: #8a6d3b; }
.message-info { background: var(--info-fond); color: var(--info); }

.pastille {
    display: inline-block; margin-left: .35rem; padding: 0 .45rem;
    border-radius: 999px; font-size: .75rem;
    background: var(--fond); color: var(--texte-doux);
}
.pastille-ok { background: var(--ok-fond); color: var(--ok); margin-left: 0; }
.pastille-alerte { background: var(--alerte-fond); color: #8a6d00; }
.pastille-erreur { background: var(--erreur-fond); color: var(--erreur); }

/* --- Formulaires ------------------------------------------------------ */

.formulaire { display: flex; flex-direction: column; gap: .75rem; }
.formulaire label { display: flex; flex-direction: column; gap: .25rem; font-weight: 700; }
.formulaire label.case { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
.formulaire fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .75rem; margin: 0; }
.formulaire legend { font-weight: 600; font-size: .9rem; padding: 0 .25rem; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=file], select, textarea {
    width: 100%;
    padding: 6px 12px;
    font: inherit; font-size: 14px; font-weight: 400;
    color: var(--texte);
    background: var(--carte);
    border: 1px solid var(--champ);
    border-radius: 1px;
}
input[readonly], input:disabled { background: #eee; }
input[type=color] { width: 4rem; height: 2.4rem; padding: 0; border: 1px solid var(--bordure); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: #1ab394; }

.actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.apercu-logo { max-height: 60px; max-width: 200px; align-self: flex-start; }

.filtres { display: flex; flex-direction: column; gap: .5rem; margin-bottom: var(--espace); }

.bouton {
    display: inline-block;
    padding: 6px 12px;
    font: inherit; font-size: 14px; font-weight: 400; line-height: 1.43; text-align: center; text-decoration: none;
    color: var(--texte);
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    cursor: pointer;
}
.bouton:hover { text-decoration: none; }
.bouton-plein { color: #fff; background: var(--couleur); border-color: var(--couleur); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.bouton:hover:not(:disabled) { filter: brightness(.92); }

.lien-discret { font-size: .85rem; }

/* --- Tableaux --------------------------------------------------------- */

/* Les tableaux larges défilent dans leur cadre plutôt que d'élargir la page. */
.tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau { width: 100%; border-collapse: collapse; border: 1px solid var(--couleur); background: var(--carte); }
.tableau th, .tableau td { padding: 8px; text-align: left; border-bottom: 1px solid var(--bordure); }
.tableau th { white-space: nowrap; }
.tableau .cellule-action { white-space: nowrap; }
.tableau th { font-weight: 700; color: #fff; background: var(--couleur); border-left: 1px solid rgba(255, 255, 255, .25); }
.tableau tbody tr:nth-child(even) td { background: #f9f9f9; }
.tableau caption { color: var(--texte); }
.tableau tr.inactif td { color: var(--texte-doux); }
.cellule-action { text-align: right; }
.cellule-action form { margin: 0; display: inline-block; }
.cellule-action .lien-discret { margin-left: .5rem; }

.pagination { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: var(--espace); }
.pagination a, .pagination span { padding: .25rem .5rem; }

/* --- Accueil ---------------------------------------------------------- */

.accueil { text-align: center; padding: var(--espace) 0; }
.accueil-avertissement { color: var(--texte-doux); font-size: .85rem; }
.accueil-logo { display: flex; justify-content: center; margin: 2rem 0; }
.accueil-logo .logo { max-height: 120px; max-width: 260px; }
/* Un bouton par sous-marque : les uns sous les autres sur mobile, côte à côte sinon. */
.accueil-collections { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.accueil-collections .bouton-grand { padding: 6px 2rem; min-width: min(100%, 18rem); }
.accueil-sous-marque { display: flex; align-items: center; justify-content: center; min-width: min(100%, 18rem); min-height: 96px; padding: .75rem 1.5rem; border: 1px solid var(--bordure, #ddd); border-radius: var(--rayon); background: #fff; }
.accueil-sous-marque:hover, .accueil-sous-marque:focus-visible { border-color: currentColor; }
.accueil-sous-marque img { max-height: 72px; max-width: 240px; }
.catalogue-titre { margin: 0 0 var(--espace); }

/* --- Catalogue -------------------------------------------------------- */

/* Bandeau gris foncé de l'ancien site, sur toute la largeur. */
.filtres-catalogue {
    align-items: center;
    /* Pleine largeur de la fenêtre, hors de la colonne de contenu. */
    margin: calc(-1 * var(--espace)) calc(50% - 50vw) var(--espace);
    padding: .6rem max(var(--espace), calc(50vw - 585px));
    color: #fff; background: var(--couleur);
}
.filtres-catalogue select { color: var(--texte); }
.filtres-catalogue .bouton { white-space: nowrap; }
.filtres-catalogue .filtres-compte { color: #fff; }
.filtres-compte { color: var(--texte-doux); align-self: center; white-space: nowrap; }
.filtres .case { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.filtre-libelle { font-size: 20px; font-weight: 600; }
.filtre-rapide { flex-direction: row; flex-wrap: wrap; align-items: center; }
.filtre-rapide input[type=search] { flex: 1 1 14rem; }

.modele { margin-bottom: 1.5rem; }
.modele-titre {
    font-size: 16px; font-weight: 600; text-transform: uppercase;
    border-top: 1px solid var(--texte); border-bottom: 1px solid var(--texte);
    padding: .15rem .25rem; margin-bottom: .5rem;
}

.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1.6rem; }
@media (min-width: 48em) { .grille-articles { grid-template-columns: repeat(auto-fill, 170px); } }
.vignette {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: 0 0 .6rem; text-align: center; text-decoration: none; color: var(--texte);
    background: var(--carte); border: 1px solid var(--bordure);
}
.vignette:hover { text-decoration: none; border-color: var(--texte); }
.vignette-visuel {
    position: relative; width: 120px; aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    background: var(--fond); border: 1px solid #ccc; border-top: 0;
}
.vignette-visuel img, .fiche-visuel img { width: 100%; height: 100%; object-fit: contain; }
.vignette-visuel:has(img), .fiche-visuel:has(img) { background: #fff; }
.vignette-stock { position: absolute; top: .3rem; right: -1.6rem; margin: 0; z-index: 1; background: var(--ok-fond); color: var(--texte); }
.vignette-sans-visuel { font-size: 2.2rem; font-weight: 700; color: var(--bordure); }
.vignette-modele { align-self: stretch; padding: .1rem .25rem; font-size: 16px; font-weight: 400; text-transform: uppercase; border: 1px solid var(--texte); }
.vignette-matiere, .vignette-coloris { font-weight: 700; text-transform: uppercase; padding-top: .3rem; }
.vignette-reference { color: var(--texte); }
.vignette-info { margin-top: .3rem; padding: .25rem .9rem; color: var(--texte); border: 1px solid var(--texte); border-radius: var(--rayon); }

.fiche { display: grid; gap: var(--espace); }
.fiche-visuel {
    aspect-ratio: 1; max-width: 22rem; width: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--fond); border-radius: var(--rayon);
}
.fiche-visuel .vignette-sans-visuel { font-size: 4rem; }
.fiche-details, .fiche-prix { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; }
.fiche-details dt, .fiche-prix dt { font-weight: 600; color: var(--texte-doux); }
.fiche-details dd, .fiche-prix dd { margin: 0; }
.fiche-prix { align-self: start; padding: .75rem; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.fiche-mention { grid-column: 1 / -1; }

.grille-tailles th, .grille-tailles td { text-align: center; min-width: 3rem; }
.grille-tailles td.indisponible { color: var(--erreur); background: var(--erreur-fond); }
.grille-tailles td.disponible { background: var(--ok-fond); }

.grille-colis { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.colis { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .5rem; font-size: .85rem; }
.colis-dispo { background: var(--ok-fond); border-color: #a5d6a7; }
.colis-epuise { background: var(--erreur-fond); border-color: #ef9a9a; }
.colis-entete { display: flex; justify-content: space-between; gap: .5rem; }
.colis-pied { display: flex; justify-content: space-between; gap: .5rem; margin-top: .35rem; color: var(--texte-doux); }
.colis-prix { margin-left: auto; text-align: right; }

.bouton-grand { font-size: 24px; font-weight: 600; padding: 6px 95px; }

/* --- Panier ----------------------------------------------------------- */

.entete-commande { grid-area: commande; display: flex; gap: .5rem; align-items: center; justify-content: flex-end; }
.bascule-prix { padding: 9px 12px; }
.minimum-alerte { max-width: 11rem; color: var(--erreur); text-align: center; line-height: 1.3; }
.bouton-commande { display: inline-flex; align-items: center; gap: .75rem; padding: 9px 22px; color: #fff; background: var(--commande); border-color: var(--commande); }
.bouton-commande:hover { color: #fff; }
.bouton-commande span { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.bouton-commande small { font-size: .85em; }
.bouton-discret { border: 0; background: none; color: var(--texte-doux); padding: .25rem .5rem; }

.saisie-quantite { width: 4.2rem; padding: .3rem .35rem; text-align: center; font: inherit; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.saisie-quantite:disabled, .saisie-pm:has(.saisie-quantite:disabled) { display: none; }
.saisie-pm { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem; background: #fff; }
.saisie-pm .saisie-quantite { width: 3.4rem; background: #f0f8c0; }
.pm {
    width: 26px; height: 26px; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: var(--texte); border: 0; border-radius: 50%; cursor: pointer; font-size: 12px;
}
.pm:hover { background: #333; }
.cumul-pointures td.rempli { background: var(--ok-fond); }
.grille-tailles td { vertical-align: top; }
.grille-tailles td .aide { display: block; margin: .15rem 0 0; }
.colis-saisie { display: flex; justify-content: center; margin: .4rem 0; }
.barre-saisie {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; gap: .5rem; justify-content: flex-end;
    padding: .6rem var(--espace); margin: 0 calc(-1 * var(--espace));
    background: var(--carte); border-top: 1px solid var(--bordure);
}

.panier-article { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--bordure); }
.panier-visuel { aspect-ratio: 1; background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
.panier-visuel img { width: 100%; height: 100%; object-fit: contain; }
.panier-detail { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.composition { display: block; margin: 0; }
.recap-pointures { width: auto; margin-top: .4rem; }
.recap-pointures caption { text-align: left; caption-side: top; }
.recap-pointures th, .recap-pointures td { text-align: center; min-width: 2.6rem; }
.panier-total { display: flex; justify-content: flex-end; gap: 1.5rem; padding: .75rem 0; font-size: 1.05rem; }

/* --- Pied de page ----------------------------------------------------- */

.pied {
    display: flex; flex-direction: column; gap: .5rem; align-items: center;
    padding: 10px 20px;
    background: var(--carte);
    border-top: 1px solid var(--bordure);
    font-size: 16px;
}
.pied-contact { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.pied-contact a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.pied .pied-telephone { color: var(--texte); }
.pied-contact .fa { font-size: 1.6em; }

/* --- Tablette ---------------------------------------------------------- */

@media (min-width: 48em) {
    .filtres { flex-direction: row; }
    .filtres input[type=search] { flex: 1; }
    .filtres select { width: auto; }

    .formulaire-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
    .formulaire-grille .pleine-largeur { grid-column: 1 / -1; }


    .fiche { grid-template-columns: minmax(12rem, 22rem) 1fr; }
    .panier-article { grid-template-columns: 7rem 1fr; }
    .fiche-prix { grid-column: 2; }
}

/* --- Poste -------------------------------------------------------------- */

@media (min-width: 64em) {
    /* Comme l'ancien site : logo à gauche, menu puis « Bienvenue » dessous,
       nouvelle commande à droite, sur 100 px de haut. */
    .entete {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "logo menu commande"
            "logo utilisateur commande";
        min-height: 100px;
        gap: 0 var(--espace);
        padding: 5px 10px;
    }
    .entete-logo .logo { max-height: 72px; }
    .menu-bouton { display: none; }
    .menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-top: 0;
    }
    .menu { flex-wrap: nowrap; }
    .menu a, .menu button { padding: 10px 16px; white-space: nowrap; }
    .entete-utilisateur { align-items: flex-start; padding-left: 30px; }
    .entete-commande { align-self: center; }
    .pied { flex-direction: row; justify-content: space-around; }

    .invite-cadre { flex-direction: row; gap: 6rem; }

    .fiche { grid-template-columns: minmax(12rem, 22rem) 1fr auto; }
    .fiche-prix { grid-column: auto; }
}

/* Commandes */
.details { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 var(--espace); font-size: .9rem; }
.details dt { color: var(--texte-doux); }
.details dd { margin: 0; }
.actions-adv { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 0; border-top: 1px solid var(--bordure); }
.formulaire-motif { display: flex; gap: .5rem; }
.historique { list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--texte-doux); }
.historique li { padding: .2rem 0; }
.cumul-pointures td { font-weight: 600; background: var(--fond); }

/* Fiche article : récapitulatif de la saisie en haut, navigation entre articles. */
.fiche-navigation { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: var(--espace); }
.recap-saisie { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espace); }
.recap-saisie .tableau-defilant { flex: 1 1 20rem; }
.recap-saisie .aide { margin: 0 0 .25rem; }
/* RAZ centré sur la hauteur des tableaux (en-tête + ligne). */
.recap-saisie [data-raz] { margin-bottom: 19px; }
.recap-totaux { width: auto; }
.recap-totaux th, .recap-totaux td { text-align: center; min-width: 6rem; }

/* Filtre rapide et Mon compte */
.filtre-rapide { align-items: center; }
.miniature { width: 3.5rem; height: 3.5rem; object-fit: contain; background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.liens-compte { display: grid; gap: var(--espace); max-width: 28rem; margin: 0 auto; }
.lien-compte { display: block; margin: 0; padding: 1.5rem; font-weight: 600; font-size: 1.05rem; text-decoration: none; border-width: 2px; }
.lien-compte:hover { border-color: var(--couleur); }
.liste-adresses { margin: 0; padding-left: 1.2rem; }
.liste-adresses li { padding: .2rem 0; }

/* Visuels des marques */
.visuel-connexion { display: block; width: 100%; height: auto; margin: var(--espace) 0; }
.compte { display: grid; gap: var(--espace); align-items: start; max-width: 60rem; margin: 0 auto; }
.compte .liens-compte { margin: 0; width: 100%; }
.visuel-compte { width: 100%; height: auto; }
.grille-visuels { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--espace); }
.cases-choix { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .5rem; }
.formulaire .cases-choix label.case { font-weight: 400; }
.apercu-visuel { display: block; width: 100%; height: 10rem; object-fit: contain; background: var(--fond); margin-bottom: .5rem; }
@media (min-width: 48em) { .compte { grid-template-columns: 1fr 1fr; } }

/* Conditions générales de vente */
.cgv h1 { text-align: center; }
.cgv h2 { margin-top: 1.25rem; }
.cgv p { text-align: justify; }
.saisie-cgv { font-family: ui-monospace, monospace; font-size: .85rem; line-height: 1.5; }

/* Validation : récapitulatif à la manière de l'ancien site. */
.recap-commande { display: grid; grid-template-columns: 1fr; gap: .4rem 1.5rem; margin-bottom: var(--espace); }
.recap-libelle { padding: .35rem .6rem; color: #fff; background: var(--couleur); font-size: 16px; font-weight: 600; text-transform: uppercase; }
.recap-valeur { padding: .35rem .8rem; font-size: 15px; border: 1px solid #1ab394; }
.recap-details { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 0 .8rem .5rem; font-weight: 600; }
.recap-details:empty { display: none; }
.recap-formulaire label.case { font-weight: 600; }
@media (min-width: 48em) {
    .recap-commande { grid-template-columns: 19rem 1fr; }
    .recap-details { grid-column: 2; }
    .recap-formulaire { margin-left: calc(19rem + 1.5rem); }
}
.sortie-tache { white-space: pre-wrap; max-height: 20rem; overflow: auto; background: var(--fond); padding: .5rem; font-size: .8rem; margin: .5rem 0 var(--espace); }
.tableau td .aide { display: block; }
.langues { display: flex; gap: .25rem; justify-content: flex-end; margin: .25rem 0; }
.langues .langue {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; cursor: pointer;
    background: #fff; border: 1px solid #ccc; border-radius: 4px;
}
.langues .langue:hover, .langues .langue:focus-visible { background: #e6e6e6; border-color: #adadad; }
.langues .langue img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
/* Langue courante : bouton enfoncé, comme un bouton actif Bootstrap. */
.langues .langue.actif { background: #e6e6e6; border-color: var(--couleur); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); cursor: default; }
.liste-textes { display: flex; flex-direction: column; gap: .5rem; }
.liste-textes .texte { display: grid; gap: .5rem; padding: .5rem; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.liste-textes .texte-modifie { border-left: 4px solid var(--couleur); }
.liste-textes label { display: flex; flex-direction: column; gap: .15rem; }
.liste-textes textarea { width: 100%; font: inherit; }
@media (min-width: 48em) { .liste-textes .texte { grid-template-columns: 1fr 1fr auto; align-items: end; } }