/* Styles des contenus de simmis-contenus.php et des widgets classiques placés dans les pages
   de la charte. Uniquement les variables de la charte (--s-*). Les liens, titres et champs visent
   « body … » (ou deux classes) : le kit Elementor (règles .elementor-kit-… h2, a…, chargées après)
   l'emporterait. */

/* Caractéristiques d'une fiche tissu */
.simmis-technique { margin: 0; }
.simmis-technique div { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 4px 20px; padding: 10px 0; border-bottom: 1px solid var(--s-filet); }
.simmis-technique dt {
    font-family: var(--s-police-titres); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--s-encre-2); padding-top: 3px;
}
.simmis-technique dd { margin: 0; font-family: var(--s-police-texte); font-size: 15px; line-height: 1.5; color: var(--s-encre); }
.simmis-technique div:has(> dd:only-child) dd { grid-column: 1 / -1; }

/* Bande pleine largeur rendue par un shortcode, comme s-section + s-largeur-utile : la gouttière
   est le retrait intérieur d'une colonne de --s-largeur au plus. */
.simmis-bande { padding: clamp(64px, 9vw, 120px) 0; }
.simmis-bande--coquille { background: var(--s-coquille); }
.simmis-bande__colonne { box-sizing: border-box; width: 100%; max-width: var(--s-largeur); margin: 0 auto; padding: 0 var(--s-gouttiere); }
.simmis-entete { padding-bottom: clamp(26px, 3vw, 38px); margin-bottom: clamp(32px, 4vw, 54px); border-bottom: 1px solid var(--s-filet); }
.simmis-entete__surtitre {
    margin: 0; font-family: var(--s-police-titres); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--s-encre-2-coquille);
}
/* Comme s-titre-section */
.simmis-entete .simmis-entete__titre {
    margin: 14px 0 0; font-family: var(--s-police-titres); font-weight: 400; font-size: var(--s-taille-section);
    line-height: .92; letter-spacing: -.025em; text-transform: uppercase; color: var(--s-encre);
}

/* Coloris : vignettes légendées */
.simmis-coloris { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 12px; margin: 0; padding: 0; list-style: none; }
.simmis-coloris figure { margin: 0; }
.simmis-coloris a { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--s-filet-leger); }
.simmis-coloris img { display: block; width: 100%; height: 100%; object-fit: cover; }
.simmis-coloris figcaption {
    margin-top: 6px; font-family: var(--s-police-titres); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--s-encre-2);
}

/* Corps d'article et texte légal (widgets classiques theme-post-content, text-editor) */
.simmis-article, .simmis-texte-long { font-family: var(--s-police-texte); font-size: 17px; line-height: 1.62; color: var(--s-encre-2); }
/* Mesure de lecture d'environ 68 caractères : 31em (un caractère moyen d'Instrument Sans fait
   0,46em ; 68ch, réglé sur le chiffre 0, plus large, en donne plus de 80). Elementor remet les
   widgets à max-width: 100 % par « .elementor.elementor .e-con > .elementor-widget » (quatre
   classes), d'où une de plus ici. */
.elementor.elementor .e-con > .elementor-widget.simmis-article, .elementor.elementor .e-con > .elementor-widget.simmis-texte-long { max-width: 31em; }
.simmis-texte-long { font-size: 16px; }
/* Intertitres en capitales, comme tous les titres (plan 7) : ceux de s-titre-article. */
body .simmis-article h2, body .simmis-texte-long h2 {
    margin: 1.8em 0 .6em; font-family: var(--s-police-titres); font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 500; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--s-encre);
}
body .simmis-article h3, body .simmis-texte-long h3 { margin: 1.5em 0 .5em; font-family: var(--s-police-titres); font-size: 1rem; font-weight: 500; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; color: var(--s-encre); }
.simmis-article p, .simmis-texte-long p { margin: 0 0 1em; }
.simmis-article b, .simmis-article strong, .simmis-texte-long b, .simmis-texte-long strong { font-weight: 600; color: var(--s-encre); }
body .simmis-article a, body .simmis-texte-long a { color: var(--s-bordeaux); text-decoration: underline; text-underline-offset: 3px; }
body .simmis-article a:hover, body .simmis-texte-long a:hover { color: var(--s-encre); }
.simmis-article ul, .simmis-article ol { margin: 0 0 1em; padding-left: 1.2em; }
.simmis-article img { max-width: 100%; height: auto; }
.simmis-article table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.simmis-article th, .simmis-article td { padding: 8px 10px; border-bottom: 1px solid var(--s-filet); text-align: left; }

/* Articles du Journal (demandes du client, 2026-10-25) : texte aux 2/3 ; à droite, au 1/3, la photo
   puis le panneau « Sommaire », qui reste sous l'en-tête collant (116 px) pendant la lecture :
   sommaire, « Voir la collection », autres articles ; plus haut que la fenêtre, il défile à
   l'intérieur. Grille dans wp-cli/articles.php. Jusqu'à 1024 px : seul le bouton reste, après le texte. */
.elementor.elementor .e-con > .elementor-widget.simmis-article.simmis-article--journal { max-width: none; }
.simmis-article__liste li { margin: 0 0 .45em; }
.simmis-article__liste li::marker { color: var(--s-bordeaux); }
body .elementor-widget.simmis-sommaire-bloc { width: 100%; position: sticky; top: 140px; }
.simmis-sommaire { max-height: calc(100vh - 164px); overflow-y: auto; padding: 24px; border: 1px solid var(--s-filet); background: var(--s-papier); }
body .simmis-sommaire .simmis-sommaire__surtitre {
    margin: 0 0 10px; font-family: var(--s-police-titres); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--s-encre-2);
}
.simmis-sommaire__liste, .simmis-sommaire__articles { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--s-filet-leger); }
.simmis-sommaire__articles { margin: 0; }
.simmis-sommaire__autres { margin-top: 28px; }
.simmis-sommaire__liste li, .simmis-sommaire__articles li { margin: 0; border-bottom: 1px solid var(--s-filet-leger); }
body .simmis-sommaire__liste a, body .simmis-sommaire__articles a {
    display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-family: var(--s-police-texte); font-size: 15px; line-height: 1.35; color: var(--s-encre); text-decoration: none;
}
body .simmis-sommaire__liste a:hover, body .simmis-sommaire__articles a:hover { color: var(--s-bordeaux); }
.simmis-sommaire__actions { display: grid; gap: 10px; }
body a.simmis-sommaire__bouton {
    display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--s-encre); background: var(--s-encre); color: var(--s-papier);
    font-family: var(--s-police-titres); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-align: center; text-decoration: none;
}
body a.simmis-sommaire__bouton:hover { background: var(--s-bordeaux); border-color: var(--s-bordeaux); color: var(--s-papier); }
body a.simmis-sommaire__bouton--contour { background: transparent; color: var(--s-encre); }
body a.simmis-sommaire__bouton--contour:hover { background: var(--s-encre); border-color: var(--s-encre); color: var(--s-papier); }
body .simmis-sommaire a:focus-visible { outline: 2px solid var(--s-bordeaux); outline-offset: 2px; }
@media (max-width: 1024px) {
    body .elementor-widget.simmis-sommaire-bloc { position: static; }
    .simmis-sommaire__nav, .simmis-sommaire__liste, .simmis-sommaire__autres, .simmis-sommaire__articles { display: none; }
    .simmis-sommaire { max-height: none; overflow: visible; padding: 0; border: 0; background: none; }
    .simmis-sommaire__actions { max-width: 360px; }
}

/* Formulaires Formidable : champs de 48 px, libellés de la charte, bouton d'envoi comme s-btn */
.simmis-formulaire .frm_forms { max-width: none; }
body .simmis-formulaire .frm_primary_label, body .simmis-formulaire label {
    font-family: var(--s-police-titres); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--s-encre-2);
}
body .simmis-formulaire input[type="text"], body .simmis-formulaire input[type="email"], body .simmis-formulaire input[type="tel"],
body .simmis-formulaire input[type="number"], body .simmis-formulaire input[type="url"], body .simmis-formulaire select, body .simmis-formulaire textarea {
    box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--s-encre-2); border-radius: 0;
    background: var(--s-papier); color: var(--s-encre); font-family: var(--s-police-texte); font-size: 16px; font-weight: 400; box-shadow: none;
}
body .simmis-formulaire textarea { min-height: 140px; }
body .simmis-formulaire .frm_radio label, body .simmis-formulaire .frm_checkbox label {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--s-police-texte); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--s-encre);
}
body .simmis-formulaire input[type="radio"], body .simmis-formulaire input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--s-bordeaux); }
body .simmis-formulaire .frm_submit button, body .simmis-formulaire .frm_submit input[type="submit"], body .simmis-formulaire .frm_button_submit {
    min-height: 48px; padding: 15px 25px; border: 1px solid var(--s-encre); border-radius: 0; background: var(--s-encre); color: var(--s-papier);
    font-family: var(--s-police-titres); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; box-shadow: none; cursor: pointer;
}
body .simmis-formulaire .frm_submit button:hover, body .simmis-formulaire .frm_button_submit:hover { background: var(--s-bordeaux); border-color: var(--s-bordeaux); }
/* Le style Formidable de la v1 impose en !important un bouton orange à texte blanc (3:1) et un
   astérisque #B94A48 (4,48:1 sur la coquille) : on le remplace avec la même force. */
/* Formidable fixe hauteur, retrait, taille et bordure des champs par ses variables, en !important :
   on règle ces variables (champs de 48 px de la charte). */
body .simmis-formulaire .with_frm_style {
    --font: var(--s-police-texte); --required-color: var(--s-bordeaux); --field-height: 48px; --field-pad: 10px 14px; --field-font-size: 16px; --field-border-width: 1px;
}
/* Échelles 1 à 5 : chaque choix (bouton et chiffre) devient une cible de 44 × 44 px. */
body .simmis-formulaire .with_frm_style .frm_scale label {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; min-height: 44px;
}
/* Descriptions et libellés d'échelle : Arial écrit en dur, en !important. */
body .simmis-formulaire .with_frm_style div.frm_description, body .simmis-formulaire .with_frm_style .frm_scale label { font-family: var(--s-police-texte) !important; }
body .simmis-formulaire .with_frm_style .frm_submit .frm_button_submit {
    background: var(--s-encre) !important; border-color: var(--s-encre) !important; color: var(--s-papier) !important;
    min-height: 48px; padding: 15px 25px; font-family: var(--s-police-titres); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
body .simmis-formulaire .with_frm_style .frm_submit .frm_button_submit:hover,
body .simmis-formulaire .with_frm_style .frm_submit .frm_button_submit:focus-visible { background: var(--s-bordeaux) !important; border-color: var(--s-bordeaux) !important; }

/* Connexion Accès pro (widget login d'Elementor Pro). Le kit encadre les champs par
   « .elementor-kit-… input:not(…):not(…) » (trois classes) : quatre ici. */
body .simmis-connexion.elementor-widget-login .elementor-field-group .elementor-field-textual {
    min-height: 48px; padding: 10px 14px; border: 1px solid var(--s-encre-2); border-radius: 0; background: var(--s-papier); color: var(--s-encre); font-family: var(--s-police-texte); font-size: 16px;
}
body .simmis-connexion.elementor-widget-login .elementor-field-group .elementor-button {
    min-height: 48px; padding: 15px 25px; border-radius: 0; background: var(--s-encre); color: var(--s-papier);
    font-family: var(--s-police-titres); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
body .simmis-connexion.elementor-widget-login .elementor-field-group .elementor-button:hover { background: var(--s-bordeaux); }
body .simmis-connexion.elementor-widget-login .elementor-field-type-checkbox label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
body .simmis-connexion.elementor-widget-login input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--s-bordeaux); }

/* Popup Accès pro d'un connecté (plan 7) : qui est connecté, puis le bouton « Déconnexion ». */
.simmis-compte-connecte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
body .simmis-compte-connecte .simmis-compte-connecte__qui { margin: 0; font-family: var(--s-police-texte); font-size: 15px; line-height: 1.6; color: var(--s-encre-2); }
body .simmis-compte-connecte .simmis-compte-connecte__qui strong { font-weight: 500; color: var(--s-encre); }
body .simmis-compte-connecte a.simmis-compte-connecte__deconnexion {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; box-sizing: border-box;
    border: 1px solid var(--s-encre); background: transparent; color: var(--s-encre); text-decoration: none;
    font-family: var(--s-police-titres); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
body .simmis-compte-connecte a.simmis-compte-connecte__deconnexion:hover,
body .simmis-compte-connecte a.simmis-compte-connecte__deconnexion:focus-visible { background: var(--s-encre); color: var(--s-papier); }

/* Popups : bouton de fermeture de 44 × 44 px sur fond papier (lisible aussi sur une photo). */
body .elementor-popup-modal .dialog-close-button {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--s-papier); border-radius: 0;
}

/* Carte Google Maps en niveaux de gris, carte des revendeurs aux couleurs de la charte */
.simmis-carte-gm iframe { display: block; width: 100%; filter: grayscale(1); border: 0; }
.simmis-carte-revendeurs svg { display: block; width: 100%; height: auto; }
.simmis-carte-revendeurs .st0, .simmis-carte-revendeurs .st1 { fill: var(--s-encre-2); }
.simmis-carte-revendeurs .st2 { fill: var(--s-coquille); }
.simmis-carte-revendeurs .stpoint { fill: var(--s-bordeaux); }

@media (max-width: 767px) {
    .simmis-coloris { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .simmis-technique div { grid-template-columns: minmax(0, 1fr); }
}

/* Accueil, « Recouvrements » : les catégories de tissus A à E (demande du client, 2026-10-24).
   Sélecteurs avec body : le kit Elementor stylise h3 et a. */
.simmis-categories-tissus { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; margin: 0; padding: 0; list-style: none; }
.simmis-categories-tissus__categorie { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; }
.simmis-categories-tissus__photo { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; margin-bottom: 8px; border: 1px solid var(--s-filet); }
body .simmis-categories-tissus .simmis-categories-tissus__titre { margin: 0; font-family: var(--s-police-titres); font-size: 15px; font-weight: 500; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; color: var(--s-encre); }
.simmis-categories-tissus__tissus { margin: 0; padding: 0; list-style: none; }
.simmis-categories-tissus__tissus li { margin: 0; }
body .simmis-categories-tissus a.simmis-categories-tissus__lien {
    display: flex; align-items: center; min-height: 32px; font-family: var(--s-police-texte); font-size: 14px; line-height: 1.35; color: var(--s-encre-2); text-decoration: none;
}
body .simmis-categories-tissus a.simmis-categories-tissus__plus {
    display: flex; align-items: center; align-self: flex-start; min-height: 32px; font-family: var(--s-police-titres); font-size: 12px; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--s-encre); text-decoration: underline; text-underline-offset: 4px;
}
body .simmis-categories-tissus a:hover, body .simmis-categories-tissus a:focus-visible { color: var(--s-bordeaux); }
@media (max-width: 1024px) {
    .simmis-categories-tissus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .simmis-categories-tissus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
    body .simmis-categories-tissus a.simmis-categories-tissus__lien, body .simmis-categories-tissus a.simmis-categories-tissus__plus { min-height: 44px; }
}