/* ==========================================================================
   MM Service De Rénovation — charte de marque
   --------------------------------------------------------------------------
   Surcharge additive du thème Rakar. Chargée APRÈS style.css.
   Ne jamais éditer style.css : ce fichier survit aux mises à jour du thème.

   Palette extraite du logo client :
     bleu marine  #132D6F   (dominant)
     bleu profond #0B2154   (titres, aplats)
     bleu vif     #1E4BA8   (dégradés, survols)
     rouge        #C8252A   (accent uniquement)
     fond         #FFFFFF   (inchangé)
   ========================================================================== */

:root {
  /* --- couleur principale : bleu marine, remplace l'orange du thème --- */
  --theme-color: #132D6F;
  --gr-color2: #1E4BA8;

  /* --- déclinaisons de marque --- */
  --brand-blue-deep: #0B2154;
  --brand-blue: #132D6F;
  --brand-blue-bright: #1E4BA8;
  --brand-blue-soft: #EEF2FA;
  --brand-red: #C8252A;
  --brand-red-dark: #A81D22;
}

/* ==========================================================================
   1. ACCENT ROUGE — réservé aux sur-titres et aux micro-signaux
   ========================================================================== */

.sub-title,
.sub-title2 {
  color: var(--brand-red);
}

/* sur fond sombre, le rouge manque de contraste : on éclaircit */
.service-area .sub-title2,
.choose-area .sub-title2,
.testi-area .sub-title,
.testi-area .sub-title2,
[data-bg-src] .sub-title2 {
  color: #FF6B62;
}

/* étoiles d'avis */
.box-review i,
.testi-grid2 .box-review i {
  color: var(--brand-red);
}

/* numéro décoratif des cartes prestation */
.service-card:hover .box-number {
  color: var(--brand-red);
}

/* ==========================================================================
   2. BOUTONS — bleu plein, survol rouge
   --------------------------------------------------------------------------
   IMPORTANT : le thème ne change PAS background-color au survol. Il fait
   glisser une couche ::before (z-index:-1) qui recouvre le fond du bouton.
   C'est donc CETTE couche qu'il faut recolorer, pas background-color.
   ========================================================================== */

/* état par défaut : bleu de marque (hérité de --theme-color) */

/* couche de survol : rouge accent, texte blanc conservé par le thème */
.th-btn:before,
.th-btn:after {
  background-color: var(--brand-red);
}

.th-btn:hover,
.th-btn.active {
  color: var(--white-color);
}

/* --- style2 : bouton contour blanc sur fond sombre (hero, sections image) ---
   Le thème le veut transparent avec bordure blanche ; sa couche de survol est
   BLANCHE. Le texte doit donc devenir SOMBRE au survol, jamais blanc. */
.th-btn.style2:hover:before,
.th-btn.style2:hover:after {
  background-color: var(--white-color);
}

.th-btn.style2:hover {
  color: var(--brand-blue);
  border-color: var(--white-color);
}

/* --- style3 : même logique, couche de survol blanche --- */
.th-btn.style3:hover:before,
.th-btn.style3:hover:after {
  background-color: var(--white-color);
}

.th-btn.style3:hover {
  color: var(--brand-blue);
}

/* --- footer : sur le bleu nuit du pied de page, un bouton bleu de marque se
   fond dans le fond. On le passe en blanc plein, couche de survol rouge. --- */
.footer-wrapper .th-btn {
  background-color: var(--white-color);
  color: var(--brand-blue);
}

.footer-wrapper .th-btn:before,
.footer-wrapper .th-btn:after {
  background-color: var(--brand-red);
}

.footer-wrapper .th-btn:hover {
  color: var(--white-color);
}

/* bouton d'envoi du formulaire pendant le chargement */
.th-btn[disabled] {
  background-color: var(--brand-blue-bright);
  opacity: .75;
  cursor: progress;
}

/* ==========================================================================
   3. LIENS ET NAVIGATION
   --------------------------------------------------------------------------
   Le survol rouge est réservé aux zones à FOND CLAIR. Sur fond sombre
   (hero, footer, sections image, fil d'Ariane) le texte reste clair.
   ========================================================================== */

a {
  color: var(--brand-blue);
}

/* survol rouge : uniquement dans le corps de page sur fond clair.
   --------------------------------------------------------------------------
   Le :not(.th-btn) n'est pas décoratif. Ces règles visent les liens de TEXTE,
   mais un bouton est aussi un <a> : sans l'exclusion elles l'emportaient sur
   `.th-btn:hover { color: white }` (même spécificité 0-2-0, mais déclarées
   plus bas dans ce fichier) et repeignaient le libellé en rouge — par-dessus
   la couche de survol ::before, rouge elle aussi. Sur l'encart "Demandez
   votre devis gratuit" des pages prestation, le texte devenait strictement
   invisible ; sur les boutons "En savoir plus", rouge sur bleu nuit. */
main a:not(.th-btn):hover,
.page-content a:not(.th-btn):hover,
.service-card a:not(.th-btn):hover,
.team-contact a:not(.th-btn):hover,
.widget a:not(.th-btn):hover {
  color: var(--brand-red);
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li.active > a {
  color: var(--brand-blue);
}

.main-menu .sub-menu li a:hover {
  color: var(--brand-red);
}

/* --- zones sombres : on éclaircit au lieu de foncer ---
   Même exclusion des boutons, pour la même raison : les boutons du hero et
   du pied de page gardent le blanc que leur donne le thème au survol. */
.footer-wrapper a:not(.th-btn):hover,
.header-top a:not(.th-btn):hover,
.breadcumb-menu li a:not(.th-btn):hover,
.hero-style6 a:not(.th-btn):hover,
[data-bg-src] .th-social a:hover {
  color: #FF6B62;
}

/* --- CORRECTIF DE CONTRASTE -------------------------------------------
   `color: inherit` remontait jusqu'au --body-color global (#666666) au lieu
   du blanc déclaré sur .footer-wrapper : gris foncé sur bleu nuit, soit un
   ratio d'environ 2:1 (AA en demande 4.5:1). On pose la couleur en clair. */
.footer-widget.widget_nav_menu a,
.footer-wrapper .footer-links a,
.footer-wrapper .copyright-text a {
  color: var(--white-color);
}

/* le survol du thème repasse en --theme-color (bleu) : illisible sur le bleu
   nuit. Ces sélecteurs sont plus spécifiques que la règle générique ci-dessus,
   il faut donc les reprendre un à un. */
.footer-widget.widget_nav_menu a:hover,
.footer-widget.widget_nav_menu a:hover:before,
.footer-wrapper .footer-links a:hover,
.footer-wrapper .copyright-text a:hover {
  color: #FF6B62;
}

/* petit tiret de séparation entre les liens légaux */
.footer-wrapper .footer-links li:after {
  background-color: rgba(255, 255, 255, .45);
}

/* pastilles réseaux sociaux : le survol bleu disparaissait sur le fond */
.footer-wrapper .th-social a:hover {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--white-color);
}

/* ==========================================================================
   4. FOND BLANC PRÉSERVÉ
   ========================================================================== */

body,
body.bg-white {
  background-color: var(--white-color);
}

/* les zones "smoke" restent un gris très légèrement bleuté, pas orangé */
:root {
  --smoke-color: #F6F8FC;
  --smoke-color2: #EEF2FA;
}

/* ==========================================================================
   5. ICÔNES ET PICTOS
   --------------------------------------------------------------------------
   Attention : .service-item .box-icon est un disque CLAIR dans le thème
   (#F8EFE9, crème). Les icônes posées dessus sont sombres. On garde donc un
   disque clair — simplement reteinté en bleu — sinon icône bleue sur fond
   bleu = invisible. .choose-feature2 .box-icon suit déjà --theme-color et
   n'a pas besoin d'être surchargé.
   ========================================================================== */

.icon-btn,
.team-contact .icon-btn {
  background-color: var(--brand-blue);
  color: var(--white-color);
  border-color: var(--brand-blue);
}

.team-contact:hover .icon-btn {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
}

/* disque clair sous les icônes de prestation : crème -> bleu très pâle */
.service-item .box-icon {
  background: var(--brand-blue-soft);
  border-color: var(--white-color);
}

/* au survol : teinte rouge pâle, l'icône sombre reste parfaitement lisible */
.service-item:hover .box-icon {
  background: #FBEAEA;
}

/* ==========================================================================
   6. FORMULAIRE
   ========================================================================== */

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-blue-bright);
  box-shadow: 0 0 0 .2rem rgba(30, 75, 168, .15);
}

.contact-form-success.alert-success {
  background-color: #E8F5EC;
  border-color: #27AE60;
  color: #1B6B3A;
}

.contact-form-error.alert-danger {
  background-color: #FBEAEA;
  border-color: var(--brand-red);
  color: var(--brand-red-dark);
}

/* ==========================================================================
   7. ACCORDÉON FAQ
   ========================================================================== */

.accordion-button:not(.collapsed) {
  color: var(--brand-blue);
}

.accordion-card.style2 .accordion-button:not(.collapsed) {
  color: var(--brand-blue);
}

/* ==========================================================================
   8. DIVERS
   ========================================================================== */

/* --- Bouton "remonter en haut" -------------------------------------------
   Le thème empile trois choses dans un disque de 50 px :
     1. un <svg> de fond blanc qui porte l'anneau de progression de lecture ;
     2. le pseudo-élément ::after, PAR-DESSUS (z-index:1), transparent, qui
        porte la flèche \f062 et le liseré ;
     3. la flèche elle-même, en color: var(--theme-color).
   Poser un background-color sur ::after peint donc un aplat opaque qui
   masque l'anneau ET, la flèche étant de la même couleur de marque, la rend
   invisible : il ne reste qu'un rond bleu uni. Le fond doit rester
   transparent — c'est le <svg> du dessous qui fournit le disque blanc. */

.scroll-top .progress-circle path {
  stroke: var(--brand-blue);
}

::selection {
  background-color: var(--brand-blue);
  color: var(--white-color);
}

.year-box,
.widget_banner {
  background-color: var(--brand-blue);
}

.checklist li::before,
.checklist ul li::before {
  color: var(--brand-red);
}

/* ==========================================================================
   9. CORRECTIFS DE MISE EN PAGE
   ========================================================================== */

/* --- Slider hero : hauteur stable ---------------------------------------
   Le thème active autoHeight, qui recalcule la hauteur du conteneur à chaque
   slide. Les titres ne faisant pas le même nombre de lignes, toute la page
   se décalait verticalement à chaque rotation (jusqu'à ~200 px de saut).
   autoHeight est désactivé côté template ; ici on fait en sorte que chaque
   slide occupe toute la hauteur du conteneur, sinon l'image de fond des
   slides les plus courtes laisse une bande vide en bas. */

.hero-6 .swiper-wrapper {
  align-items: stretch;
}

.hero-6 .swiper-slide {
  height: auto;
}

.hero-6 .hero-inner {
  height: 100%;
}

/* ==========================================================================
   10. EN-TÊTE ET PIED DE PAGE — MISE EN PAGE
   ========================================================================== */

/* --- Logo -----------------------------------------------------------------
   Le thème est dessiné pour un logotype large et couché. Celui du client est
   quasiment carré : à hauteur égale il « remplit » donc beaucoup moins la
   barre qu'un logotype, d'où l'impression de petitesse. On ne fixe QUE la
   hauteur, la largeur suit le ratio (forcer 50x50 l'écrasait — audit
   Lighthouse « Images affichées dans un format incorrect »).

   PLAFOND À NE PAS DÉPASSER : le fichier servi fait 200 x 187 px. Au-delà de
   ~93 px de haut il pixellise sur un écran Retina (DPR 2), et au-delà de
   ~62 px sur un mobile haut de gamme (DPR 3). D'où 60 px en mobile (net
   partout), 76 px en desktop (net en DPR 2). Pour monter plus haut il faut
   d'abord un fichier source plus grand (SVG, ou PNG >= 600 px de côté). */

.header-layout1 .header-logo img {
  height: 76px;
  width: auto;
  max-width: none;
}

/* L'accueil (header-layout5) garde un logo un peu plus discret : son bandeau
   blanc est posé sur le hero, pas sur un fond neutre. */
.header-layout5 .header-logo img {
  height: 64px;
  width: auto;
}

/* Medium devices */
@media (max-width: 991px) {
  .header-layout1 .header-logo img,
  .header-layout5 .header-logo img {
    height: 60px;
  }
}

/* Le logo du tiroir mobile est le seul élément de marque de l'écran : il peut
   prendre de la place, le tiroir fait 310 px de large. */
.th-menu-wrapper .mobile-logo img {
  height: 80px;
  width: auto;
}

.footer-wrapper .about-logo img {
  height: 76px;
  width: auto;
}

/* --- En-tête des pages intérieures (header-layout1) ------------------------
   La barre blanche flottante est posée par le thème ; on lui redonne juste
   un peu d'air vertical, le logo étant plus haut que le logotype d'origine. */

.header-layout1 .menu-area {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Le thème pose deux petits triangles bleu nuit de part et d'autre de la barre
   blanche : ils servent à la raccorder au fond gris de la démo Rakar
   (body #E1E4E5). Notre fond de page est blanc, ils n'ont plus rien à
   raccorder et flottent comme deux chevrons parasites. On les retire. */

.header-layout1 .menu-area:before,
.header-layout1 .menu-area:after {
  display: none;
}

/* --- Pied de page ---------------------------------------------------------
   La carte blanche de contact est collée au contenu de la page ; on écarte
   les trois blocs pour éviter qu'ils ne se touchent sur écran moyen. */

.footer-contact-area .footer-contact-wrap {
  gap: 24px;
}

.footer-contact .box-text {
  max-width: 260px;
}

/* "Nos prestations" compte dix entrées : sur une seule colonne le pied de page
   devenait deux fois plus haut que les autres blocs. On le coupe en deux
   listes côte à côte à partir de lg. */

.footer-widget .menu-all-pages-container.row {
  --bs-gutter-x: 16px;
}

/* Le thème pose margin-top:-5px ET margin-bottom:-5px sur ces listes (un
   rattrapage d'interligne). Sur deux sous-listes empilées, le -5px du bas
   remonte la seconde de 5 px : ses liens chevauchent le dernier de la
   première, ce que l'audit target-size signale comme une cible "partially
   obscured". On neutralise les deux marges et on rétablit un écart réel. */
.footer-widget .menu-all-pages-container.row > .menu {
  margin-top: 0;
  margin-bottom: 0;
}

.footer-widget .menu-all-pages-container.row .menu li:last-child a {
  margin-bottom: 10px;
}

/* Medium devices */
@media (max-width: 991px) {
  .footer-widget .menu-all-pages-container.row > .menu {
    width: 100%;
  }
}

/* Bloc horaires / zone d'intervention */
.footer-wrapper .th-widget-schedule .schedule-info {
  border-bottom: none;
  margin-bottom: 8px;
  padding-bottom: 0;
  font-weight: 600;
  color: var(--white-color);
}

.footer-wrapper .th-widget-schedule .footer-text {
  margin-top: 0;
  margin-bottom: 22px;
}

/* ==========================================================================
   11. ICÔNES DES CARTES PRESTATION
   --------------------------------------------------------------------------
   Le thème Rakar est un template de dépannage électroménager : ses SVG de
   prestation représentent un téléviseur, une ampoule, une prise, un robinet…
   Six des dix métiers du client se retrouvaient avec une icône sans rapport
   (une ampoule pour « Ferronnerie », un robinet pour « Débarras de Maison »).

   On les remplace par des glyphes Font Awesome 6 Pro Light, déjà chargés par
   le site, qui couvrent précisément les dix métiers. Le poids « light » (300)
   retrouve le trait fin des SVG d'origine. Ces règles redonnent au <i> la
   taille, la couleur et l'animation de survol qu'avait le <img>.
   ========================================================================== */

.service-card .box-icon i,
.service-item .box-icon i,
.service-grid .box-icon i {
  color: var(--brand-blue);
  line-height: 1;
  display: inline-block;
  transition: 0.4s ease-in-out;
}

/* cartes de la page "Nos prestations" : icône libre, calée sur la taille
   native des SVG remplacés (32 à 40 px) */
.service-card .box-icon i,
.service-grid .box-icon i {
  font-size: 38px;
}

/* cartes de l'accueil : icône centrée dans la pastille de 72 px */
.service-item .box-icon i {
  font-size: 34px;
  line-height: 72px;
}

/* le thème retourne l'icône au survol de la carte ; on conserve le geste */
.service-card:hover .box-icon i,
.service-item:hover .box-icon i,
.service-grid:hover .box-icon i {
  transform: rotateY(180deg);
}

/* ==========================================================================
   12. HAUTEUR DES CARTES PRESTATION
   --------------------------------------------------------------------------
   .service-card n'a pas de hauteur : chaque carte s'arrête à la fin de son
   texte. Les descriptions faisant de trois à cinq lignes et les titres une ou
   deux, les blocs d'une même ligne se terminaient à des hauteurs différentes
   et les boutons "En savoir plus" flottaient à des niveaux différents.

   Les colonnes Bootstrap sont déjà étirées par le flex de .row : il suffit
   que la carte remplisse sa colonne, puis que l'espace libre soit absorbé
   sous la description pour que le bouton se cale en bas.
   ========================================================================== */

.service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* l'espace restant se place sous la description, pas entre le titre et elle */
.service-card .box-text {
  margin-bottom: auto;
}

/* sans cela le bouton, devenu élément flex, s'étirerait sur toute la largeur.
   Il conserve son margin-top de 32 px : l'écart minimum reste garanti même
   quand la carte est la plus haute de sa ligne et qu'il n'y a aucun surplus. */
.service-card .th-btn {
  align-self: flex-start;
}

/* Le carrousel de l'accueil souffre du même écart, à une échelle bien moindre
   (6 px, dû aux titres qui passent parfois sur deux lignes). Les slides Swiper
   sont déjà étirées à la plus haute : il suffit que la carte remplisse la
   sienne. On s'en tient à height, sans passer .service-item en flex : sa
   pastille d'icône chevauche la photo par une marge négative
   (.box-icon { margin: -75px 0 0 0 }) et ce calage n'a pas à être touché. */

.service-item {
  height: 100%;
}

/* ==========================================================================
   13. CORRECTIFS D'ACCESSIBILITÉ (audit Lighthouse)
   ========================================================================== */

/* --- Contraste du bloc "Ans d'expérience" --------------------------------
   Le thème y laisse son orange d'origine (#F47629) sur un crème (#F8EFE9) :
   2,47:1 mesuré, alors que WCAG AA demande 3:1 pour du grand texte. Ces deux
   couleurs sont des restes du thème, jamais reprises par la charte — la règle
   `.year-box { background-color }` de la section 8 ne les atteignait pas,
   étant moins spécifique que `.img-box7 .year-box`. On repasse le bloc sur le
   bleu pâle déjà utilisé ailleurs et le nombre sur le bleu de marque : 11,5:1. */

.img-box6 .year-box,
.img-box7 .year-box {
  background: var(--brand-blue-soft);
}

.img-box6 .year-box .box-number,
.img-box7 .year-box .box-number {
  color: var(--brand-blue);
}

/* --- Taille des zones tactiles du pied de page ----------------------------
   Les liens des listes "Liens utiles" et "Nos prestations" ne font que 21 px
   de haut, pour un minimum recommandé de 24 px. On les épaissit de 3 px en
   haut et en bas et on reprend la marge pour ne pas rallonger le pied de page
   (21+6+10 = 37 px, exactement le rythme vertical d'avant). */

.footer-widget.widget_nav_menu a {
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 10px;
}

/* le chevron est positionné en absolu sur le lien : il suit le décalage */
.footer-widget.widget_nav_menu a:before {
  top: 5px;
}

/* --- Repère principal -----------------------------------------------------
   <main> vient d'être ajouté au gabarit. La règle de survol rouge de la
   section 3 ciblait déjà `main a`, restée sans effet jusqu'ici faute de
   <main> dans le document : elle devient active, ce qui est bien l'intention
   d'origine (liens de texte du corps de page en rouge au survol, boutons
   exclus par le :not(.th-btn)). */

main {
  display: block;
}

/* ==========================================================================
   14. DÉPANNAGE D'URGENCE — APPEL DIRECT DEPUIS LE MENU
   --------------------------------------------------------------------------
   Un même `tel:` décliné en trois formats selon la place disponible :

     .header-urgence       barre de menu, >= 992 px (à côté du devis)
     .header-urgence-pill  barre de menu, < 992 px (à gauche du burger)
     .mobile-urgence       tiroir mobile, bloc pleine largeur sous le logo

   C'est le seul endroit du site où le rouge de marque sert d'aplat et non
   d'accent : l'urgence est justement ce qui doit sortir du bleu ambiant.
   ========================================================================== */

/* --- Barre de menu, desktop ----------------------------------------------
   L'affichage est piloté par les classes Bootstrap `d-none d-lg-inline-flex`
   posées dans le gabarit (elles sont en !important) : ne pas déclarer
   `display` ici, il serait ignoré. */

.header-urgence {
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(200, 37, 42, 0.22);
  border-radius: 14px;
  background-color: #FDF2F2;
  line-height: 1.15;
  white-space: nowrap;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header-urgence-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--brand-red);
  color: var(--white-color);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.header-urgence-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-urgence-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-red-dark);
  transition: color 0.3s ease;
}

.header-urgence-num {
  font-family: var(--title-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-blue-deep);
  transition: color 0.3s ease;
}

.header-urgence:hover {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
}

.header-urgence:hover .header-urgence-icon {
  background-color: var(--white-color);
  color: var(--brand-red);
}

.header-urgence:hover .header-urgence-label,
.header-urgence:hover .header-urgence-num {
  color: var(--white-color);
}

/* Entre 992 et 1199 px, il reste environ 120 px de libre entre le menu et le
   bouton devis (mesuré à 992 px) : le bloc complet en fait 300 et ferait
   passer la barre sur deux lignes. On n'y garde que la pastille ronde, le
   numéro restant lisible en toutes lettres dans le bandeau du haut. */
@media (max-width: 1199px) {
  .header-urgence {
    padding: 4px;
    border-radius: 50%;
    background-color: transparent;
    border-color: transparent;
  }
  .header-urgence-body {
    display: none;
  }
  .header-urgence-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  .header-urgence:hover {
    background-color: transparent;
    border-color: transparent;
  }
  .header-urgence:hover .header-urgence-icon {
    background-color: var(--brand-red-dark);
    color: var(--white-color);
  }
}

/* Sur l'accueil, l'en-tête est posé sur le hero sombre : le fond rosé du bloc
   y paraît sale. On repasse en blanc, comme l'encoche du menu juste à côté. */
.header-layout5 .header-urgence {
  background-color: var(--white-color);
  border-color: rgba(255, 255, 255, 0.3);
}

.header-layout5 .header-urgence:hover {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
}

/* --- Barre de menu, mobile ------------------------------------------------ */

.header-actions {
  gap: 10px;
  margin-left: auto;
}

.header-urgence-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background-color: var(--brand-red);
  color: var(--white-color);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.header-urgence-pill:hover,
.header-urgence-pill:focus {
  background-color: var(--brand-red-dark);
  color: var(--white-color);
}

/* Sous 360 px, le libellé passe derrière l'icône : le `aria-label` du lien
   porte l'information pour les lecteurs d'écran. */
@media (max-width: 359px) {
  .header-urgence-pill span {
    display: none;
  }
  .header-urgence-pill {
    padding: 11px 13px;
  }
}

/* --- Tiroir mobile --------------------------------------------------------
   Le thème plafonnait la hauteur du menu à `calc(100vh - 200px)`, valeur
   calée sur l'ancien en-tête du tiroir. Le logo est passé à 80 px et le bloc
   urgence s'ajoute au-dessus de la liste : on remplace ce nombre magique par
   une colonne flex, la liste prend simplement la place restante. */

.th-menu-wrapper .th-menu-area {
  display: flex;
  flex-direction: column;
}

.th-menu-wrapper .mobile-logo {
  padding-bottom: 22px;
  padding-top: 32px;
  flex: 0 0 auto;
}

.th-mobile-menu {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 24px;
  overflow-y: auto;
}

.mobile-urgence {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 20px;
  background-color: var(--brand-red);
  color: var(--white-color);
  text-align: center;
}

.mobile-urgence:hover,
.mobile-urgence:focus {
  background-color: var(--brand-red-dark);
  color: var(--white-color);
}

.mobile-urgence-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.92;
}

.mobile-urgence-label i {
  margin-right: 6px;
}

.mobile-urgence-num {
  display: block;
  margin-top: 4px;
  font-family: var(--title-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.mobile-urgence-dispo {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  opacity: 0.9;
}

/* ==========================================================================
   15. PUCES DU MENU MOBILE — CARRÉ BLANC À LA PLACE DU CHEVRON
   --------------------------------------------------------------------------
   Défaut antérieur à cette modif, mais visible juste à côté du nouveau bouton
   d'urgence, donc corrigé ici.

   `.th-mobile-menu ul li a:before` du thème demande `content: '\f105'`
   (angle-right). Ce glyphe n'est pas dans la police réduite : 1_collect.py ne
   reconnaît que les `content: "\f105"` en GUILLEMETS DOUBLES, or le thème
   écrit celui-ci en quotes simples. Résultat : un carré de glyphe manquant
   devant chaque entrée du menu mobile, sur toutes les pages.

   Plutôt que de régénérer la police pour une flèche, on dessine le chevron en
   CSS : aucune dépendance à Font Awesome, donc plus rien à resynchroniser.
   (Correctif de fond, pour plus tard : accepter les deux styles de quotes
   dans la regex de build/fa-subset/1_collect.py, puis régénérer.)
   ========================================================================== */

.th-mobile-menu ul li a:before,
.main-menu ul.mega-menu .th-mobile-menu ul li a:before {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  top: 17px;
  left: 2px;
  opacity: 0.5;
}