/*!
 * Takwa Collection — classes propres à WordPress (thème takwa)
 * Chargé après takwa.css. Ne modifie pas le système de design : il ajoute seulement ce que WordPress produit
 * (barre d'administration, classes du contenu de l'éditeur, alignements, légendes) et la mise en page des gabarits
 * génériques (page.php, search.php, index.php, 404.php).
 */

/* ============================================================ 1. ACCESSIBILITÉ (classes WordPress) */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: static !important; width: auto; height: auto; clip-path: none; }
#contenu:focus { outline: none; }

/* ============================================================ 2. BARRE D'ADMINISTRATION (clientes et boutique connectées) */
.admin-bar .entete { top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--topbar-h)); }
.admin-bar .menu-mobile, .admin-bar .tiroir, .admin-bar .recherche { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
  /* sous 600 px, la barre d'administration n'est plus fixe : elle défile avec la page */
  .admin-bar .entete { top: calc(-1 * var(--topbar-h)); }
  .admin-bar .menu-mobile, .admin-bar .tiroir, .admin-bar .recherche { top: 0; }
}

/* ============================================================ 3. GABARITS GÉNÉRIQUES */
.principal { display: block; min-height: 40vh; }
.page-info__corps { padding-bottom: var(--section-y); }
.page-woocommerce__corps { padding-bottom: var(--section-y); }
.legal { padding-bottom: var(--section-y); }
.pagination-page { display: flex; gap: var(--e-3); justify-content: center; padding-bottom: var(--section-y); }
.notices-wc { padding-block: var(--e-4) 0; }

/* Recherche (search.php) : en-tête, barre d'outils et grille de la boutique (pages/boutique.css), sans colonne de filtres */
.recherche-page__outils .barre-outils__compte { padding-left: 0; text-align: left; }
.page-recherche .recherche-page__collections { padding-left: 0; }
.page-recherche .recherche-page__grille { margin-top: var(--e-6); }
.recherche-page__outils .boutique__tri-ok {
  display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--filet-fort); border-radius: var(--r-1); background: var(--fond-carte); color: var(--accent);
}
.recherche-page__outils .boutique__tri-ok:hover { border-color: var(--accent); }
.recherche-page__pages { padding-top: 0; }
.recherche-page__vide .etat-vide__titre { font-family: var(--f-titre); font-size: 1.5rem; color: var(--titre); }
.recherche-page__form { width: min(100%, 34rem); margin: var(--e-6) auto 0; }
.recherche-page__titre { margin: var(--e-8) 0 var(--e-5); }
.recherche-page__titre:first-child { margin-top: 0; }
.recherche-page__suggestions { display: grid; justify-items: center; gap: var(--e-3); text-align: center; }
.recherche-page__vide p:not([class]) { max-width: 30rem; }
.titre-section h1 bdi { font-style: italic; color: var(--or-titre); }
.resultats-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--filet); }
.resultats-pages__item { padding: var(--e-5) 0; border-bottom: 1px solid var(--filet); display: grid; gap: var(--e-2); }
.resultats-pages__lien { font-family: var(--f-titre); font-size: 1.45rem; font-weight: 500; color: var(--titre); text-decoration: none; line-height: 1.2; }
.resultats-pages__lien:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.resultats-pages__extrait { font-size: var(--fs-petit); }

/* ============================================================ 4. CONTENU DE L'ÉDITEUR (blocs, alignements) */
.prose-legale img { height: auto; }
.prose-legale figure { margin: var(--e-6) 0; }
.prose-legale figcaption, .wp-caption-text, .wp-element-caption { font-size: var(--fs-mini); color: var(--texte-doux); margin-top: var(--e-2); text-align: center; }
.prose-legale blockquote { margin: var(--e-6) 0; padding: var(--e-2) 0 var(--e-2) var(--e-5); border-left: 2px solid var(--or-deco); font-family: var(--f-titre); font-size: 1.3rem; font-style: italic; color: var(--titre); }
.prose-legale table { width: 100%; border-collapse: collapse; font-size: var(--fs-petit); }
.prose-legale th, .prose-legale td { padding: .6rem .75rem; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.prose-legale th { font-weight: 500; color: var(--titre); }
.prose-legale .wp-block-table { overflow-x: auto; }
.prose-legale .wp-block-button__link, .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .85rem 1.6rem;
  font-family: var(--f-texte); font-size: .76rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--accent-contraste); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-1);
}
.prose-legale .wp-block-button__link:hover, .wp-block-button__link:hover { background: var(--accent-survol); border-color: var(--accent-survol); }
.prose-legale .wp-block-separator, .prose-legale hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e-8) 0; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.alignleft { float: left; margin: .3rem var(--e-5) var(--e-4) 0; }
.alignright { float: right; margin: .3rem 0 var(--e-4) var(--e-5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.gallery { display: grid; gap: var(--e-3); grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr)); }
.gallery-item { margin: 0; }
.sticky, .bypostauthor { /* classes WordPress (articles mis en avant, réponses de l'autrice) : pas de style particulier */ }

/* ============================================================ 5. PAGE CONSTRUITE AVEC ELEMENTOR (en attendant sa refonte) */
.page-elementor { padding-bottom: var(--section-y); }

/* ============================================================ 6. CORRECTIONS DE LA RECETTE (24/10/2026, takwa.css reste la copie du prototype) */
/* Bandeau du haut, téléphone : un message long passe sur deux lignes au lieu d'être coupé des deux côtés
   (display:flex + nowrap + overflow:hidden du prototype). Deux lignes tiennent dans la hauteur du bandeau (36 px). */
@media (max-width: 599px) {
  .topbar__message { white-space: normal; text-align: center; line-height: 1.2; text-wrap: balance; }
}
/* Panneau ouvert (mini-panier, feuille de filtres, menu) : il passe devant le bandeau cookies en mode « info »,
   qui reste au-dessus du voile (300) et réapparaît à la fermeture du panneau (WCAG 2.4.11 : rien de focalisé caché). */
body.scroll-bloque .cookies--info { z-index: calc(var(--z-tiroir) - 5); }

/* ============================================================ 7. CORRECTIONS DE LA RECETTE N° 1 (24/10/2026, correcteur-2) */
/* Menu principal (ordinateur) : chaque libellé et la pastille « Créer mon prénom en arabe » restent sur une ligne, la
   liste garde ses marges (gouttière) ; de 1024 à 1279 px (tablettes en paysage, petites fenêtres), lettrage et
   espacements resserrés pour que le menu tienne sur une ligne comme le prototype. Si le menu est allongé à la main
   (Apparence › Menus), les éléments passent à la ligne entre eux au lieu de déborder de l'écran. */
@media (min-width: 1024px) {
  .nav-principale__liste { flex-wrap: wrap; row-gap: 0; padding-inline: var(--gouttiere); }
  .nav-principale__lien, .nav-principale__perso { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav-principale__liste { column-gap: clamp(.9rem, 1.6vw, 1.5rem); }
  .nav-principale__lien { font-size: .7rem; letter-spacing: .12em; }
  .nav-principale__perso { letter-spacing: .1em; padding-inline: .8rem; }
}