/*
Theme Name: HERMUS 2027
Description: Thème enfant de Twenty Twenty-One pour hermus.fr — refonte visuelle 2027.
Author: HERMUS
Template: twentytwentyone
Version: 2.4
Text Domain: hermus-2027
*/

/* ============================================================
   1. Variables de travail (repères du référentiel)
   ============================================================ */
:root{
  --hermus-navy:#001939;   /* bleu marine aligné sur le bandeau validé */
  --hermus-blue:#087FD1;   /* accent */
  --hermus-cyan:#12B8EE;   /* accent/focus */
  --hermus-text:#172337;   /* texte courant */
  --hermus-muted:#526174;  /* texte secondaire */
  --hermus-alertbg:#DCE7F3;/* fond de la zone des alertes */
  --hermus-red:#C62828;     /* urgence */
}

/* ============================================================
   2. Neutralisation de la largeur maximale de Twenty Twenty-One
      sur la page d'accueil : bandeaux pleine largeur,
      contenu intérieur centré à 1200 px max.
   ============================================================ */
.hermus-home .site-main,
.hermus-home .entry-content,
.hermus-home .entry-footer{
  max-width:100%;
  margin:0;
  padding-left:0;
  padding-right:0;
}
.hermus-home .entry-content > *{
  max-width:100% !important;
  margin-top:0 !important;    /* aucun espace parasite entre/autour des bandeaux */
  margin-bottom:0 !important; /* TT1 impose une marge basse à chaque section */
  margin-left:0;
  margin-right:0;
}
.hermus-home .site-content,
.hermus-home #primary,
.hermus-home .site-main > article{
  margin:0 !important;   /* aucune bande blanche autour des bandeaux */
  padding:0 !important;
}
.hermus-home .site-main > article > .entry-header{
  display:none; /* la page d'accueil n'a pas besoin du titre d'article TT1 */
}
.hermus-home .entry-footer{
  display:none; /* masquer le lien « Modifier » sous le contenu */
}
.hermus-home .site-main{
  padding:0 !important;
}

/* Contenu intérieur centré à 1200 px */
.hermus-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}

/* ============================================================
   3. EN-TÊTE — version 2.2
      A. header.php ENFANT (actif) : .site-logo / .site-branding /
         .hermus-navigation — aucune classe TT1, hamburger supprimé.
      B. REPLI TT1 (sécurité) : si le header.php enfant venait à
         manquer, l'en-tête natif de Twenty Twenty-One
         (.primary-navigation, hamburger .menu-button-container)
         resterait néanmoins stylé marine/blanc/mode horizontal.
      !important systématique : la feuille TT1 se charge APRÈS
      celle du thème enfant.
   ============================================================ */

/* --- Socle commun : bandeau marine pleine largeur en grille --- */
.site-header{
  background:var(--hermus-navy) !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
  padding:10px max(24px, calc((100vw - 1200px)/2)) !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) auto;
  grid-template-areas:"logo branding nav";
  align-items:center;
  column-gap:16px;
  row-gap:8px;
}

/* --- 3A. Markup du header.php enfant ------------------------- */

.site-header > .site-logo{
  grid-area:logo;
  margin:0 !important;
  padding:0 !important;
  display:block;
  line-height:0;
  /* Neutralise .site-header > .site-logo de TT1 (chargé APRÈS l'enfant) :
     width:100%, border-bottom:1px solid, text-align:center */
  width:auto !important;
  border:none !important;
  text-align:left !important;
}
.site-header > .site-logo img{
  display:block;
  width:48px !important;
  max-width:100% !important;
  height:auto !important;
}
.site-header > .site-branding{
  grid-area:branding;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
  align-self:center;
  text-align:left !important;
}
.site-header .site-description{
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  color:#fff !important;
  opacity:.95;
  font-size:.8rem;
  line-height:1.3;
}
/* Navigation maison : flex horizontal partout */
.site-header > .hermus-navigation{
  grid-area:nav;
  justify-self:end;
  align-self:center;
  width:auto;
  margin:0 !important;
  padding:0 !important;
  text-align:right;
}
.hermus-navigation .hermus-menu{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.hermus-navigation li{
  margin:0;
}
.hermus-navigation a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  color:#fff !important;
  text-decoration:none !important;
  border-radius:4px;
  font-size:.95rem;
}
.hermus-navigation a:hover,
.hermus-navigation a:focus,
.hermus-navigation a:active,
.hermus-navigation .current-menu-item > a{
  color:#fff !important;
  text-decoration:none !important;
  border-bottom:none !important;
}
.hermus-navigation a:hover,
.hermus-navigation a:focus{
  background:rgba(255,255,255,.12);
}
/* Entrée « Urgence » (classe CSS dans Apparence > Menus) */
.hermus-navigation li.hermus-nav-urgence a{color:#fff !important;}
/* Numéro sur fond rouge, cliquable (lien tel:+33780247351) */
.hermus-navigation li.hermus-nav-phone a{
  background:var(--hermus-red);
  font-weight:700;
  border-radius:4px;
}
/* Contact + symbole d'enveloppe */
.hermus-navigation li.hermus-nav-contact a::before{
  content:"✉ ";
  font-size:1.05em;
  line-height:1;
}

/* --- 3B. En-tête TT1 (ACTIF : le header.php enfant est supprimé,
       c'est l'en-tête natif qui s'affiche) --------------------- */

.site-header .site-branding{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:14px;
  min-width:0;
}

.site-header .site-branding .custom-logo-link{
  display:block;
  flex:0 0 auto;
  margin:0 !important;
  padding:0 !important;
  line-height:0;
  width:auto !important;
  border:none !important;
  text-align:left !important;
}
.site-header .site-branding .custom-logo-link img{
  display:block;
  width:48px !important;
  max-width:100% !important;
  max-height:100px !important;
  height:auto !important;
}
.site-header .site-title{
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-size:1.15rem !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
.site-header .site-title a{
  color:#fff !important;
  text-decoration:none !important;
}
.site-header .site-title a:hover,
.site-header .site-title a:focus{
  color:#fff !important;
  text-decoration:none !important;
}
/* Hamburger TT1 : jamais affiché, à aucune taille */
.site-header .menu-button-container{
  display:none !important;
}
/* Nav TT1 : remise en flux, horizontale, blanche */
.site-header .primary-navigation{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  width:auto !important;
  margin:0 0 0 auto !important;
  padding:0 !important;
  grid-area:nav !important;
  justify-self:end;
  align-self:center;
  color:#fff;
  font-size:.9rem !important;
  background:transparent !important;
}
.site-header .primary-navigation > .primary-menu-container{
  position:relative !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  height:auto !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  overflow:visible !important;
  z-index:auto;
}
.site-header .primary-menu-container > ul{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  background:transparent !important;
}
.site-header .primary-menu-container > ul > li{
  display:block !important;
  width:auto !important;
  position:relative;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}
.site-header .primary-navigation a{
  display:inline-flex !important;
  align-items:center;
  padding:8px 12px !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:.88rem !important;
  font-weight:500 !important;
  line-height:1.3 !important;
  text-decoration:none !important;
  text-decoration-color:transparent !important;
  border-bottom:none !important;
  border-radius:4px;
  background:transparent !important;
}
.site-header .primary-navigation a:hover,
.site-header .primary-navigation a:focus,
.site-header .primary-navigation a:active{
  color:#fff !important;
  text-decoration:none !important;
  background:rgba(255,255,255,.12) !important;
}
.site-header .primary-navigation .current-menu-item > a,
.site-header .primary-navigation .current_page_item > a{
  color:#fff !important;
  text-decoration:none !important;
}
.site-header .primary-navigation a:focus{
  outline:2px solid var(--hermus-cyan) !important;
  outline-offset:1px;
}
/* Pas de sous-menu dans notre barre : toggles et sous-listes masqués */
.site-header .primary-navigation .sub-menu-toggle,
.site-header .primary-navigation .sub-menu{
  display:none !important;
}
/* Entrées spéciales du menu, markup TT1 */
.site-header .primary-navigation li.hermus-nav-urgence a{color:#fff !important;}
.site-header .primary-navigation li.hermus-nav-phone a{
  background:var(--hermus-red) !important;
  font-weight:700 !important;
}
.site-header .primary-navigation li.hermus-nav-contact a::before{
 /*content:"✉ ";*/
  font-size:1.05em;
  line-height:1;
}

/* --- Écrans étroits (≤600px) : identité en haut, menu centré dessous --- */
@media (max-width:600px){
  .site-header{
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:
      "logo branding"
      "nav nav";
    column-gap:12px;
    row-gap:8px;
    padding:10px 14px !important;
  }
  .site-header > .hermus-navigation{
    justify-self:stretch;
    width:100%;
  }
  .hermus-navigation .hermus-menu{
    justify-content:center;
    gap:6px;
  }
  .hermus-navigation a{
    font-size:.78rem;
    padding:6px 9px;
  }
  /* Repli TT1 sur mobile */
  .site-header .primary-navigation{
    justify-self:stretch;
    width:100% !important;
    margin:0 !important;
  }
  .site-header .primary-menu-container > ul{
    justify-content:center;
    gap:0;
  }
  .site-header .primary-navigation a{
    font-size:.74rem !important;
    padding:6px 8px !important;
  }
  .site-header .site-title{font-size:1rem !important;}
  .site-header .site-description{font-size:.7rem !important;}
  .site-header .site-branding .custom-logo-link img{width:40px !important;}
}

/* ============================================================
   4. Bandeau supérieur « Présentation »
   ============================================================ */
.hermus-hero{
  position:relative;
  min-height:400px;
  display:flex;
  align-items:center;
  background-color:var(--hermus-navy);
  /* Image validée : sert de fond au bandeau */
  background-image:url('https://hermus.fr/wp-content/uploads/2026/10/hermus-banniere.png');
  background-size:cover;
  background-position:center;
}
/* Alignement du texte sur le bord gauche du logo */
.hermus-hero .hermus-wrap{
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
  box-sizing:border-box;
}
.hermus-hero-inner{
  margin-left:0;
  max-width:600px;
  color:#fff;
  text-align:left;
}
.hermus-hero h2{
  color:#fff !important;
  font-size:2.4rem;
  line-height:1.2;
  margin:0 0 14px;
}
/* Accent cyan du h2 volontairement désactivé (« pause hermus ») :
   pour le réactiver, décommentez la ligne suivante
.hermus-hero h2 .hermus-accent{color:var(--hermus-cyan);}
*/
.hermus-hero p{
  color:#fff !important;
  line-height:1.65;
  margin:0;
  font-size:1.05rem;
}
/* Pas de bouton d'action ni de numéro de téléphone dans ce bandeau. */

/* ============================================================
   5. Zone centrale — carrousel des prestations + panneau dépliant
   ============================================================ */
.hermus-services{padding:56px 0;}
.hermus-section-title{
  font-size:1.6rem;
  color:var(--hermus-navy);
  margin:0 0 6px;
}
.hermus-section-sub{
  color:var(--hermus-muted);
  margin:0 0 28px;
}
.hermus-cards{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding-bottom:20px;
  scroll-snap-type:x mandatory;
}
.hermus-card{
  flex:0 0 260px;
  scroll-snap-align:start;
  background:#fff;
  border:1px solid #dce6f2;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  transition:box-shadow .2s, transform .2s;
  display:flex;          /* colonne : le lien « En savoir plus » */
  flex-direction:column;/* reste calé en bas de chaque carte      */
}
.hermus-card:hover{
  box-shadow:0 8px 22px rgba(6,21,47,.15);
  transform:translateY(-3px);
}
.hermus-card[aria-expanded="true"]{
  outline:3px solid var(--hermus-blue);
}
.hermus-card img{
  display:block;
  width:100%;
  height:130px;
  object-fit:cover;
}
.hermus-card h4{
  font-size:1rem;        /* harmonisé avec les titres des alertes */
  font-weight:600;
  color:var(--hermus-navy);
  line-height:1.35;
  margin:14px 16px 8px;
}
.hermus-card p{
  font-size:.85rem;      /* harmonisé avec les extraits des alertes */
  color:var(--hermus-muted);
  line-height:1.5;
  margin:0 16px 14px;
}

/* Lien « lire la suite » sous chaque carte : #001938, souligné, sans fond.
   !important nécessaire : Twenty Twenty-One habille TOUS les <button>
   (fond noir, texte blanc, police de titres) et sa feuille se charge
   APRÈS celle du thème enfant. */
.hermus-card-btn{
  display:inline-block !important;
  width:auto !important;
  margin:auto 16px 16px !important;
  padding:4px 0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background:none !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#001938 !important;
  font-family:inherit !important;
  font-size:.8rem !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  text-align:left !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
  cursor:pointer !important;
  transition:color .2s !important;
}
.hermus-card:hover .hermus-card-btn,
.hermus-card[aria-expanded="true"] .hermus-card-btn,
.hermus-card-btn:hover,
.hermus-card-btn:focus{
  color:var(--hermus-blue) !important;
  background:none !important;
  background-color:transparent !important;
  border:0 !important;
}

/* Panneau dépliant : contenu chargé depuis la page WordPress */
.hermus-panel{
  overflow:hidden;
  max-height:0;
  transition:max-height .35s ease;
  background:#F3F7FB;
  border-radius:10px;
  margin-top:22px;
}
.hermus-panel.is-open{max-height:600px; overflow-y:auto;}
.hermus-panel-inner{padding:26px 28px;}
.hermus-panel-title{
  color:var(--hermus-navy);
  margin:0 0 12px;
  font-size:1.3rem;
}
.hermus-panel-body{
  color:var(--hermus-muted);
  line-height:1.65;
  font-size:.95rem;
}
.hermus-panel-close{
  float:right;
  background:none;
  border:none;
  color:var(--hermus-navy);
  font-size:1.3rem;
  cursor:pointer;
  padding:0 4px;
}
.hermus-panel-loading{
  color:var(--hermus-muted);
  font-style:italic;
}
.hermus-confidential{
	font-size: .9em;
	font-style: italic;}
/* ============================================================
   5 bis. Pages prestations : chapitres en 3 colonnes
   Classe générique : <section class="hermus-chapitres">.
   Fonctionne dans le panneau dépliant et sur la page.
   ============================================================ */
.hermus-chapitres{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
  align-items:start;
}
/* Chaque chapitre : une colonne, marges TT1 neutralisées */
.hermus-chapitres > article{
  min-width:0;
  margin:0 !important;
}
/* Titres des chapitres : à peine plus grands que le texte courant */
.hermus-chapitres h2{
  font-size:1.1rem !important;
  line-height:1.35 !important;
  margin:0 0 12px !important;
  color:var(--hermus-navy);
  font-weight:600;
}
/* Filet central pour la lisibilité */
.hermus-chapitres > .hermus-chapitre-2{
  border-left:1px solid #dce6f2;
  border-right:1px solid #dce6f2;
  padding-left:20px;
  padding-right:20px;
}
/* ---------- Responsive : 3 → 1 colonne ---------- */
@media (max-width:900px){
  .hermus-chapitres{
    grid-template-columns:1fr;
    gap:20px;
  }
  .hermus-chapitres > .hermus-chapitre-2{
    border-left:none;
    border-right:none;
    padding-left:0;
    padding-right:0;
  }
}

/* ============================================================
   6. Carrousel des alertes CERT-FR / ANSSI
   ============================================================ */
.hermus-alerts-section{
  background:var(--hermus-alertbg); /* fond plus soutenu */
  padding:56px 0;
}
.hermus-alerts{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding-bottom:10px;
}
.hermus-alert-item{
  flex:0 0 340px;
  background:#fff;
  border-left:4px solid var(--hermus-blue);
  border-radius:10px;     /* même arrondi que les cartes prestations */
  padding:16px 18px;
  box-shadow:0 2px 8px rgba(6,21,47,.06);
  transition:box-shadow .2s, transform .2s;
}
.hermus-alert-item:hover{
  box-shadow:0 8px 22px rgba(6,21,47,.12);
  transform:translateY(-3px);
}
.hermus-alert-date{
  font-size:.75rem;
  color:var(--hermus-muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.hermus-alert-title{
  margin:8px 0;
  font-size:1rem;          /* harmonisé avec les titres des cartes */
  font-weight:600;
  color:var(--hermus-navy);
  line-height:1.35;
}
.hermus-alert-title a{color:var(--hermus-navy);}
.hermus-alert-excerpt{
  font-size:.85rem;       /* harmonisé avec les textes des cartes */
  color:var(--hermus-muted);
  line-height:1.5;
  margin:0 0 10px;
}
.hermus-alert-link{
  color:var(--hermus-blue);
  font-weight:600;
  font-size:.85rem;
}
.hermus-cert-badge{
  display:inline-block;
  background:var(--hermus-navy);
  color:#fff;
  font-size:.72rem;
  padding:3px 10px;
  border-radius:20px;
  margin-bottom:18px;
  letter-spacing:.04em;
}

/* ============================================================
   7. Bandeau inférieur « À propos » — image de fond pleine
      largeur, voile sombre, texte en surimpression à droite.
   ============================================================ */
.hermus-home .hermus-about{
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  color:#fff;
  background-color:var(--hermus-navy);
  background-image:url("https://hermus.fr/wp-content/uploads/2026/10/A-propos.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-sizing:border-box;
}
/* Voile sombre pour assurer la lisibilité du texte */
.hermus-home .hermus-about::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,25,57,.92) 0%,
    rgba(0,25,57,.78) 25%,
    rgba(0,25,57,.25) 50%
  );
  pointer-events:none;
}
/* Zone intérieure */
.hermus-home .hermus-about-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  max-width:1248px;
  min-height:339px;
  margin:0 auto;
  padding:36px 24px;
  box-sizing:border-box;
}
/* Texte superposé à l'image */
.hermus-home .hermus-about-text{
  width:100%;
  max-width:760px;
  margin-left:auto;
  color:#fff;
}
.hermus-home .hermus-about-text h4{
  margin:0 0 14px;
  color:#fff !important;
  font-size:1.5rem;
  line-height:1.25;
}
.hermus-home .hermus-about-text p{
  margin:0 0 12px;
  color:#fff !important;
  font-size:.95rem;
  line-height:1.6;
}
/* Référence Cybermalveillance : logo officiel en fichier distinct,
   jamais retouché, redimensionné proportionnellement */
.hermus-home .hermus-cyber-ref{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
  padding:12px 16px;
  background:rgba(0,25,57,.72);
  border:1px solid rgba(255,255,255,.25);
  border-radius:8px;
}
.hermus-home .hermus-cyber-ref img{
  display:block;
  flex:0 0 auto;
  width:120px;
  max-width:30%;
  height:auto;
}
.hermus-home .hermus-cyber-ref span{
  color:#fff;
  font-size:.82rem;
  line-height:1.5;
}

/* ============================================================
   8. Pied de page : bleu marine pleine largeur, textes blancs,
      collé sous le bandeau « À propos ».
   ============================================================ */
.hermus-home .hermus-about{
  margin:0 !important; /* collé aux sections voisines et au footer */
}
/* Copyright et liens du footer : mêmes taille et casse partout */
#colophon .site-info{
  font-size:.85rem;
}
#colophon .site-name,
#colophon .hermus-copyright,
#colophon .powered-by,
#colophon .powered-by a,
#colophon .site-info a{
  text-transform:none !important;   /* « Tous droits réservés » en minuscules */
  font-size:.85rem !important;      /* même taille pour tous les éléments */
  letter-spacing:normal !important;
}
#colophon .hermus-copyright{
  color:#fff !important;
}
#colophon .site-info a{
  color:#fff !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
#colophon.site-footer{
  background-color:var(--hermus-navy) !important;
  color:#fff !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border-top:none !important;
  box-sizing:border-box;
}
#colophon .site-info{
  width:100% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:20px 24px !important;
  box-sizing:border-box;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  align-items:center !important;
  justify-content:space-between;
  gap:8px 24px !important;
  border-top:none !important;
}
/* Groupe logo + copyright, côte à côte sur la même ligne */
#colophon .site-name{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  align-items:center !important;
  gap:8px 14px !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
}
#colophon .site-logo{
  margin:0 !important;
  padding:0 !important;
}
#colophon .site-logo img{
  display:block;
  width:48px;
  max-width:100%;
  height:auto;
}
#colophon .powered-by{
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  text-align:right;
}
#colophon .powered-by a{
  color:#fff !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
#colophon .powered-by a:hover,
#colophon .powered-by a:focus{
  color:var(--hermus-cyan) !important;
}

/* ============================================================
   10. Pages intérieures (Urgence, Contact, Mentions légales…)
   ============================================================ */
/* Mise en page 2 colonnes des pages intérieures */
.hermus-2col{
  display:flex;
  flex-wrap:wrap;
  gap:36px;
  align-items:flex-start;
  margin:24px 0;
}
.hermus-col-main{flex:1 1 460px; min-width:0;}
.hermus-col-aside{flex:0 1 320px; min-width:260px;}

/* Page Urgence */
.hermus-urgence-intro{
  font-size:1.1rem;
  color:var(--hermus-text);
}
.hermus-urgence-liste li{
  margin:10px 0;
  line-height:1.6;
}
.hermus-urgence-cta{
  background:var(--hermus-navy);
  color:#fff;
  border-radius:10px;
  padding:22px 24px;
  text-align:center;
  margin-bottom:20px;
}
.hermus-urgence-cta h3{color:#fff !important;
	margin:0 0 10px;
}
.hermus-urgence-tel a{
  display:inline-block;
  background:var(--hermus-red);
  color:#fff;
  font-size:1.5rem;
  font-weight:700;
  padding:12px 20px;
  border-radius:6px;
  text-decoration:none;
}
.hermus-urgence-tel a:hover{opacity:.9;}
.hermus-urgence-horaires{
  margin:14px 0 4px;
  color:#fff;
  line-height:1.5;
}
.hermus-urgence-sms{
  margin:0;
  color:#fff;
  font-weight:600;
}
.hermus-urgence-zone,
.hermus-urgence-17cyber{
  background:var(--hermus-alertbg);
  border-radius:10px;
  padding:16px 20px;
  margin-bottom:16px;
}
.hermus-urgence-zone h3,
.hermus-urgence-17cyber h3{
  margin:0 0 8px;
  color:var(--hermus-navy);
  font-size:1rem;
}
.hermus-urgence-zone p,
.hermus-urgence-17cyber p{
  margin:0;
  font-size:.9rem;
  line-height:1.6;
}
.hermus-urgence-17cyber a{
  color:var(--hermus-blue);
  font-weight:600;
}
/* Page Mentions légales */
.hermus-cookie-box{
  background:var(--hermus-navy);
  color:#fff;
  border-radius:10px;
  padding:20px 22px;
  margin-bottom:20px;
}
.hermus-cookie-box h3{
  color:#fff;
  margin:0 0 10px;
}
.hermus-cookie-box p{
  margin:0;
  line-height:1.65;
}
.hermus-mentions-note{
  background:var(--hermus-alertbg);
  border-radius:10px;
  padding:18px 20px;
  margin-bottom:16px;
}
.hermus-mentions-note h3{
  margin:0 0 8px;
  color:var(--hermus-navy);
  font-size:1rem;
}
.hermus-mentions-note p{
  margin:0 0 10px;
  font-size:.9rem;
  line-height:1.65;
}
.hermus-mentions-liste li{
  margin:8px 0;
  line-height:1.6;
}

/* Lien « Retour à l'accueil » (ajouté par functions.php) */
.hermus-back{
  margin:0 0 28px;
}
.hermus-back a{
  display:inline-block;
  padding:8px 14px;
  border:1px solid var(--hermus-navy);
  border-radius:6px;
  color:var(--hermus-navy);
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
  transition:background .2s, color .2s;
}
.hermus-back a:hover,
.hermus-back a:focus{
  background:var(--hermus-navy);
  color:#fff;
}
/* Harmonisation du contenu des pages avec la palette du site */
.page .entry-title,
.single .entry-title{
  color:#fff;
  font-weight:600;
}

.page .entry-title{
  color:#fff;
  font-weight:600;
}
.single .entry-content{
  color:var(--hermus-text);
  line-height:1.7;
}
/*.page .entry-content a{
  color:#fff;
}*/
.single .entry-content a{
  color:var(--hermus-blue);
}
.page .entry-content h2,
.page .entry-content h3,
.single .entry-content h2,
.single .entry-content h3{
  color:var(--hermus-navy);
  font-weight:600;
}

/* ============================================================
   11. Adaptation mobile : titres réduits, menu horizontal (le
       hamburger TT1 est masqué par la section 3), textes
       justifiés, bandeaux moins hauts.
   ============================================================ */

/* Textes justifiés (partout, avec césure française pour éviter
   les « rivières » d'espaces) */
.hermus-home .hermus-hero p,
.hermus-home .hermus-about-text p,
.hermus-panel-body,
.hermus-card p,
.hermus-alert-excerpt,
.page .entry-content p,
.single .entry-content p{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* ---------- Tablettes et grands mobiles ---------- */
@media (max-width:820px){
  .hermus-hero{min-height:300px;}
  .hermus-hero h2{font-size:1.6rem;}
  .hermus-hero p{font-size:1rem;}
  .hermus-section-title{font-size:1.3rem;}
  .hermus-card{flex:0 0 78%;}
  .hermus-alert-item{flex:0 0 82%;}
  .hermus-home .hermus-about{background-position:center;}
  .hermus-home .hermus-about-inner{
    min-height:0;
    padding:26px 18px;
  }
  .hermus-home .hermus-about::before{
    background:rgba(0,25,57,.82);
  }
  .hermus-home .hermus-about-text h4{font-size:1.2rem;}
  .hermus-home .hermus-cyber-ref{
    align-items:flex-start;
    gap:10px;
    padding:10px;
  }
  .hermus-home .hermus-cyber-ref img{width:95px;}
}

/* ---------- Petits écrans (≤600 px) ---------- */
@media (max-width:600px){
  .hermus-hero{
    min-height:200px;          /* bandeau moins haut sur 6-7 pouces */
    background-size:cover;
    background-position:center right;
  }
  .hermus-hero h2{font-size:1.35rem;}
  .hermus-hero p{font-size:.95rem;}
  .hermus-section-title{font-size:1.2rem;}
  .hermus-section-sub{font-size:.9rem;}
  .hermus-home .hermus-about-inner{padding:20px 14px;}
  .hermus-home .hermus-about-text h4{font-size:1.15rem;}
  .hermus-home .hermus-about-text p{font-size:.9rem;}
  .page .entry-title,
  .single .entry-title{font-size:1.5rem;}
  .page .entry-content h2,
  .single .entry-content h2{font-size:1.3rem;}
  .page .entry-content h3,
  .single .entry-content h3{font-size:1.1rem;}
  #colophon .site-info{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:20px 24px !important;
  }
  #colophon .powered-by{text-align:left;}
}

/* ---------- Bandeaux : versions mobile des images ----------
   Préparez des recadrages moins hauts (par ex. 800 × 400 px, le sujet
   recentré) et téléversez-les dans la médiathèque, puis ajustez les URL.
   Tant que ces fichiers n'existent pas, laissez ce bloc en commentaire
   ou supprimez-le : les réglages ≤600 px ci-dessus s'appliquent déjà. */
@media (max-width:600px){
  .hermus-hero{
    background-image:url('https://hermus.fr/wp-content/uploads/2026/10/hermus-banniere-mobile.png');
    background-position:center right;
  }
  .hermus-home .hermus-about{
    background-image:url('https://hermus.fr/wp-content/uploads/2026/10/A-propos-mobile.png');
    background-position:center top;
  }
}
/*************************css mage mobile*/


/* HERMUS — marge intérieure du texte sur mobile */
@media (max-width: 600px) {

  /* Pages intérieures : conserver les fonds pleine largeur */
  .page .entry-content > p,
  .single .entry-content > p,
  .page .entry-content > h2,
  .page .entry-content > h3,
  .single .entry-content > h2,
  .single .entry-content > h3,
  .page .entry-content > ul,
  .page .entry-content > ol,
  .single .entry-content > ul,
  .single .entry-content > ol {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

}

/* HERMUS — marge intérieure du texte du bandeau sur mobile */
@media (max-width: 600px) {
  .hermus-hero-inner {
    margin-left: 18px !important;
    margin-right: 18px !important;
    width: auto;
    box-sizing: border-box;
  }
}