/* ============================================================
   lelectronique.com - nouvelle direction de design
   Phase 1 : en-tete + menu uniquement (gabarits partages).
   Le reste du site continue d'utiliser css/style-min.css tel
   quel, jusqu'a ce que chaque type de page soit migre a son tour.
   Charge APRES style-min.css : les regles ci-dessous prennent le
   dessus sur les memes selecteurs (#header, #menu, etc.) sans
   toucher au HTML/PHP existant.
   ============================================================ */

/* Polices Space Grotesk / IBM Plex Mono chargees depuis header.php,
   avec le meme mecanisme non-bloquant que Montserrat/Roboto. */

:root{
  --ink:#132327;
  --teal:#00695c;
  --teal-dark:#004d43;
  --copper:#c8712d;
  --copper-light:#e8a86b;
  --paper:#f7f6f2;
  --white:#ffffff;
  --line:#e3e0d6;
  --muted:#6b7580;
}
body{background:var(--paper) !important}

/* .container etait fixe a 1152px dans l'ancien CSS : cause racine du
   debordement horizontal sur toute la page a partir du moment ou une
   section devient plus etroite que son contenu. Rendu fluide (mais
   jamais plus large qu'avant) pour debloquer le responsive site entier,
   sans changer le rendu desktop actuel. */
.container{
  width:100% !important;
  max-width:1152px;
  box-sizing:border-box !important;
  padding:0 20px;
}
@media only screen and (min-width:1152px){
  .container{padding:0}
}

/* ===== bandeau du haut (contact / facebook) ===== */
.fd_head{
  background:var(--ink) !important;
  color:#cfd8d6;
}
.fd_head .container{height:auto !important;overflow:visible !important}
#headerbar{
  float:none !important;
  display:flex;
  justify-content:flex-end;
  gap:0;
  padding:6px 0;
}
#headerbar a{
  background:none !important;
  color:#cfd8d6 !important;
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  letter-spacing:.03em;
  padding:4px 14px !important;
  float:none !important;
}
#headerbar a:hover{color:var(--copper-light) !important}

/* ===== zone logo + recherche ===== */
#header2{background:var(--white) !important}
#header{
  width:100% !important;
  max-width:1200px;
  padding:18px 24px !important;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  box-sizing:border-box;
}
#logo{
  float:none !important;
  height:auto !important;
  padding:0 !important;
  display:flex;
  align-items:center;
}
#logo img{
  width:78px;height:78px;
  display:block;
}
#slogan-header{
  float:none !important;
  width:auto !important;
  height:auto !important;
  max-width:170px;
  padding:0 0 0 14px !important;
  margin:0 !important;
  border-left:1px solid var(--line);
}
#slogan-header a{display:block}
#slogan-header a span{
  font-size:1.1rem !important;
  color:var(--muted) !important;
  font-weight:500 !important;
  font-family:'IBM Plex Mono',monospace;
  line-height:1.35;
}
#slogan-header a span strong{color:var(--teal)}
#logo::after{content:none}

/* le 3e enfant direct de #header est le bloc recherche (sans classe/id
   propre) : on le pousse a droite sans toucher a l'espacement logo/slogan */
#header > div:last-child{margin-left:auto !important}
#haut-header{display:none !important}
#search-haut{
  float:none !important;
  padding:0 !important;
  display:block;
}
#cse-search-box{
  display:flex;
  align-items:center;
}
#cse-search-box .search-input{
  height:40px !important;
  width:280px !important;
  font-style:normal !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
  border-radius:20px 0 0 20px !important;
  font-size:.9rem !important;
  padding:0 16px !important;
}
#cse-search-box .submit-button{
  height:40px !important;
  width:auto !important;
  background:var(--teal) !important;
  border-radius:0 20px 20px 0 !important;
  font-size:.85rem !important;
  padding:0 18px !important;
}
#cse-search-box .submit-button:hover{background:var(--teal-dark) !important}

/* Bouton icone recherche : n'existe visuellement qu'en mobile (voir plus
   bas). En desktop, la recherche reste affichee en clair comme avant. */
/* Neutralise une ancienne regle du site (destinee a d'autres cases a
   cocher, style "coche verte") qui s'applique aussi par erreur a la
   nouvelle case de recherche car elle suit le meme motif HTML
   "input[type=checkbox] + label". */
.search-toggle-checkbox + label:before,
.search-toggle-checkbox + label:after,
.footer-acc-check + label:before{
  content:none !important;
  display:none !important;
}
.footer-acc-check + label:after{content:none}

.search-toggle-checkbox,.search-toggle-btn,.header-menu-btn{display:none}

/* ===== navigation principale ===== */
.menucontainer_fd{
  background:var(--teal) !important;
  border-top:0;
  border-bottom:0;
  margin:0 !important;
}
.menucontainer{
  width:100% !important;
  max-width:1200px;
  background:var(--teal) !important;
  box-sizing:border-box;
  padding:0 24px;
}
#toggle-menu{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  color:#fff !important;
  font-size:.92rem !important;
  text-transform:uppercase;
  letter-spacing:.04em;
}
#toggle-menu .drop-icon{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
}
#menu a,#menu li{color:#fff !important}
#menu a{
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:.94rem !important;
  padding:14px 16px !important;
  border-radius:6px;
  box-sizing:border-box;
}
#menu a:hover{
  background:rgba(255,255,255,.1) !important;
  color:var(--copper-light) !important;
}
#menu a.active{
  background:none !important;
  color:var(--copper-light) !important;
  font-weight:700;
}
#menu label.drop-icon,#menu ul span.drop-icon{
  background:transparent !important;
  color:#fff !important;
}
#menu .sub-menu{
  background:var(--white) !important;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 16px 32px -16px rgba(19,35,39,.25);
  padding:8px !important;
  margin:0 !important;
}
/* Zone tampon invisible au-dessus du sous-menu : garde le survol actif
   pendant que la souris descend du lien vers le sous-menu (sinon le
   petit espace entre les deux fait perdre le :hover et le menu se
   referme avant qu'on ait pu l'atteindre). */
#menu .sub-menu:before{
  content:'';
  position:absolute;
  top:-8px;
  left:0;
  right:0;
  height:8px;
}
#menu .sub-menu li{border:0 !important}
#menu .sub-menu a{
  color:var(--ink) !important;
  font-weight:400;
  font-size:.88rem !important;
  border-radius:6px;
  padding:8px 14px !important;
}
#menu .sub-menu a:hover{
  background:var(--paper) !important;
  color:var(--teal) !important;
}

/* mobile : logo + slogan + recherche + menu sur une seule ligne.
   Le menu s'ouvre en plein ecran (comme Futura Sciences) au lieu d'un
   accordeon local, via la meme case a cocher #tm qu'auparavant. */
@media only screen and (max-width:52em){
  html,body{overflow-x:hidden}
  html:has(#tm:checked),body:has(#tm:checked){
    overflow:hidden !important;
    height:100%;
    touch-action:none;
    overscroll-behavior:none;
  }
  body:has(#tm:checked) #header2{
    touch-action:none;
  }
  #headerbar{
    gap:0 !important;
  }
  #headerbar a{
    padding:6px 10px !important;
    white-space:nowrap;
    font-size:0 !important;
  }
  #headerbar a i{font-size:1rem}
  #header{padding:10px 20px !important; gap:10px}
  #logo img{width:44px;height:44px}
  #slogan-header{
    max-width:none;
    padding:0 0 0 10px !important;
    flex:1;
    min-width:0;
  }
  #slogan-header a span{font-size:1rem !important; line-height:1.3}
  #header > div:last-child{
    margin-left:0 !important;
    width:auto;
    display:flex;
    align-items:center;
    gap:6px;
  }

  /* --- recherche repliee en icone --- */
  .search-toggle-checkbox{
    display:block !important;
    position:absolute !important;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
  }
  .search-toggle-btn,.header-menu-btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:38px;height:38px;
    border-radius:50%;
    background:var(--teal);
    color:#fff;
    cursor:pointer;
    font-size:1rem;
    flex-shrink:0;
    position:relative;
    z-index:2200;
  }
  #haut-header{display:none !important}
  #search-haut{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    width:100% !important;
    box-sizing:border-box;
    background:var(--white);
    z-index:2050;
    padding:24px;
    align-items:center;
    justify-content:center;
  }
  .search-toggle-checkbox:checked ~ #search-haut{display:flex}
  .search-toggle-checkbox:checked ~ .search-toggle-btn{
    background:var(--teal-dark);
  }
  body:has(.search-toggle-checkbox:checked) .search-toggle-btn i:before{content:"\f00d"}
  #cse-search-box{display:flex; width:100%; max-width:420px}
  #cse-search-box .search-input{
    flex:1 1 auto;
    width:auto !important;
    min-width:0;
    height:46px !important;
    font-size:1rem !important;
    padding:0 16px !important;
  }
  #cse-search-box .submit-button{
    flex:0 0 auto;
    width:auto !important;
    height:46px !important;
    font-size:.9rem !important;
    padding:0 20px !important;
  }

  /* --- bouton menu (celui du header, visible) --- */
  #toggle-menu{display:none !important} /* l'original, remplace par header-menu-btn */

  /* --- menu plein ecran --- */
  .menucontainer{padding:0}
  .menucontainer_fd{border:0}
  #menu .main-menu{
    display:none;
  }
  #tm:checked+.main-menu{
    display:block !important;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    width:100%;
    background:var(--white);
    z-index:2000;
    overflow-y:auto;
    padding:90px 24px 40px;
    box-sizing:border-box;
    margin:0;
  }
  /* En-tete (logo, recherche, bouton fermer) epingle en haut de l'ecran
     pendant que le menu plein ecran est ouvert : reste accessible quel
     que soit le scroll (page ou menu), au lieu de suivre le flux normal
     de la page et disparaitre. */
  body:has(#tm:checked) #header2{
    position:fixed;
    top:0;left:0;right:0;
    z-index:2100;
    background:var(--white);
  }
  /* case a cocher toujours cachee (le bouton header-menu-btn la pilote) */
  #menu input[type=checkbox]{
    position:absolute !important;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
  }
  #menu a,#menu li{width:100% !important}
  #menu .main-menu > li > a{
    font-size:1.3rem !important;
    padding:16px 4px !important;
  }
  #menu a{
    color:var(--ink) !important;
    text-align:left;
    border-bottom:1px solid var(--line) !important;
    border-radius:0 !important;
  }
  #menu a:hover{
    background:var(--paper) !important;
    color:var(--teal) !important;
  }
  #menu a.active{
    color:var(--copper) !important;
  }
  #menu label.drop-icon,#menu ul span.drop-icon{
    color:var(--ink) !important;
  }
  #menu .sub-menu{
    box-shadow:none;
    border:0;
    border-radius:0;
    background:var(--paper) !important;
  }
  /* icone du bouton header : change en croix quand le menu plein ecran
     est ouvert (Safari/Chrome recents). Amelioration progressive : sans
     support de :has(), l'icone reste simplement un hamburger, sans casser
     l'ouverture/fermeture qui fonctionne via la case a cocher normale. */
  body:has(#tm:checked) .header-menu-btn i:before{content:"\f00d"}
}

/* Tablette (52.01-64em) : l'ancien site forcait le menu en 3 colonnes
   (#menu li{width:33.333%}) pour compenser sa largeur fixe de 1150px.
   Notre conteneur est desormais fluide, donc ce compromis n'est plus
   necessaire : le menu s'affiche naturellement sur une seule ligne. */
@media only screen and (min-width:52.01em) and (max-width:64em){
  #menu li{width:auto !important}
  #menu .main-menu{max-width:100%}
  .actu-row:nth-child(n+10){display:none}
}

/* Le bouton "retour en haut" utilisait margin-left:1150px (ancienne mise
   en page fixe), qui le pousse hors ecran a toute largeur non-desktop. */
.bouton-top{
  margin-left:0 !important;
  position:fixed !important;
  right:20px;
  bottom:20px;
  left:auto !important;
}
#btn_up{
  background:var(--ink);
  border-radius:50%;
  width:44px;height:44px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px -8px rgba(19,35,39,.4);
}
#btn_up img{width:18px;height:auto}

/* ============================================================
   Phase 2 : page d'accueil - section actualites
   Classes specifiques a l'accueil (#box-actu, .actu-*), aucun
   risque pour les autres pages qui n'utilisent pas ces classes.
   ============================================================ */
.actu-section{
  border-radius:14px !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 16px -8px rgba(19,35,39,.12);
  padding:24px !important;
  box-sizing:border-box !important;
}
.actu-section h2.titre{
  background:none !important;
  color:var(--copper) !important;
  text-shadow:none !important;
  font-family:'IBM Plex Mono',monospace;
  font-size:1.15rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:0 !important;
  margin-bottom:20px !important;
  display:flex;
  align-items:center;
  gap:10px;
}
.actu-section h2.titre:before{
  content:'';
  width:8px;height:8px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 0 3px rgba(200,113,45,.18);
  flex-shrink:0;
}
.actu-section h2.titre:after{
  content:'';
  flex:1;
  height:2px;
  background:linear-gradient(90deg, var(--copper), transparent);
  max-width:120px;
}
.actu-content{
  display:flex;
  align-items:flex-start;
  gap:28px;
  margin:20px 0;
}
.actu-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  flex:2;
  min-width:0;
}
.actu-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.actu-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 28px -16px rgba(19,35,39,.22);
  border-color:var(--teal);
  color:inherit;
}
.actu-card-img{
  aspect-ratio:4/3;
  background:var(--paper);
  overflow:hidden;
}
.actu-card-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.actu-card-body{
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.actu-card-cat{
  font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--teal);
  font-weight:600;
}
.actu-card-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:.85rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.3;
  margin:0;
}
.actu-card-date{
  margin-top:auto;
  padding-top:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;
  color:var(--muted);
}

/* Liste compacte pour les articles au-dela des 10 premiers */
.actu-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
  border-top:1px solid var(--line);
}
.actu-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 4px;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:background .15s;
}
.actu-row:hover{background:var(--paper); color:inherit}
.actu-row-img{
  flex-shrink:0;
  width:60px;height:45px;
  border-radius:6px;
  overflow:hidden;
  background:var(--paper);
}
.actu-row-img img{width:100%;height:100%;object-fit:cover;display:block}
.actu-row-body{min-width:0}
.actu-row-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.actu-row-date{
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;
  color:var(--muted);
}

@media only screen and (max-width:52em){
  .actu-content{flex-direction:column; gap:20px}
  .actu-grid{grid-template-columns:repeat(2,1fr); gap:12px; flex:none; width:100%}
  .actu-list{flex:none; width:100%}
}

/* Bouton "Plus d'actualite" */
.actu-more-btn{
  background:none !important;
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.actu-more-btn:hover{
  background:none !important;
}
.actu-more-btn a{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  background:var(--teal) !important;
  color:#fff !important;
  padding:10px 20px !important;
  border-radius:22px !important;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.88rem;
  text-decoration:none !important;
  transition:background .15s, transform .15s;
}
.actu-more-btn a:hover{
  background:var(--teal-dark) !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.actu-more-btn a i{margin-left:2px}

/* ============================================================
   Phase 2 (suite) : presse, depannage, montages/cours - accueil
   Tout est scope par #id (box-press, box-panne, box-depan,
   box-schema-depannage, box-ressource) : aucun risque pour les
   7 autres pages qui utilisent .survol avec l'ancien style.
   ============================================================ */

/* Cartouche commun (meme traitement que .actu-section) */
#box-depan,#box-ressource{
  background:var(--white);
  border-radius:14px !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 16px -8px rgba(19,35,39,.12);
  padding:24px !important;
  box-sizing:border-box !important;
  height:auto !important;
  float:none !important;
  clear:both;
}
/* #box-press est imbrique DANS #box-actu (deja stylee en cartouche) :
   pas de cadre redondant, juste un separateur discret. */
#box-press{
  border-top:1px solid var(--line);
  margin-top:24px !important;
  padding-top:20px !important;
}
#box-panne,#box-schema-depannage{margin-top:0}
#box-depan{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-start;
}
#box-depan > p{width:100%; flex:0 0 100%}
#box-panne,#box-schema-depannage,#box-depan-pub{
  flex:1;
  min-width:0;
}
#box-panne{
  display:flex;
  flex-direction:column;
}
#box-panne h2.barre_titre,
#box-schema-depannage h2.barre_titre{width:100%}
#box-depan{margin-bottom:24px !important}
#box-ressource{margin-top:0 !important}
#box-ressource{
  display:flex;
  gap:24px;
  background:none;
  border:0 !important;
  box-shadow:none;
  padding:0 !important;
}
#box-ressource .box-double{
  flex:1;
  min-width:0;
  width:auto !important;
  height:auto !important;
  float:none !important;
  background:var(--white);
  border-radius:14px !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 16px -8px rgba(19,35,39,.12);
  padding:24px !important;
  box-sizing:border-box !important;
  margin:0 !important;
}

/* Titres : meme habillage "eyebrow" que la section actu */
#box-press h2.barre_titre,
#box-depan h2.titre,
#box-panne h2.barre_titre,
#box-schema-depannage h2.barre_titre,
#box-ressource h2.titre{
  background:none !important;
  color:var(--copper) !important;
  text-shadow:none !important;
  font-family:'IBM Plex Mono',monospace;
  font-size:1.15rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:0 !important;
  margin:0 0 16px 0 !important;
  border:none !important;
  border-left:none !important;
  display:flex;
  align-items:center;
  gap:10px;
}
#box-press h2.barre_titre:before,
#box-depan h2.titre:before,
#box-panne h2.barre_titre:before,
#box-schema-depannage h2.barre_titre:before,
#box-ressource h2.titre:before{
  content:'' !important;
  display:block !important;
  position:static !important;
  top:auto !important;
  left:auto !important;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 0 3px rgba(200,113,45,.18);
  flex-shrink:0;
}
#box-press h2.barre_titre:after,
#box-depan h2.titre:after,
#box-panne h2.barre_titre:after,
#box-schema-depannage h2.barre_titre:after,
#box-ressource h2.titre:after{
  content:'' !important;
  display:block !important;
  position:static !important;
  top:auto !important;
  left:auto !important;
  border-right:none !important;
  flex:1;
  width:auto !important;
  height:2px;
  background:linear-gradient(90deg, var(--copper), transparent);
  max-width:120px;
}
#box-depan > p{
  color:var(--muted);
  font-size:.9rem;
  margin:-8px 0 20px 0;
}
#box-ressource .box-double > p{
  color:var(--muted);
  font-size:.85rem;
  margin:-8px 0 16px 0;
}

/* Liste presse : lignes compactes, meme esprit que .actu-row */
#box-press .font1{
  font-family:'IBM Plex Mono',monospace;
  color:var(--muted);
  font-size:.72rem;
}
#box-press a.aactu{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  color:var(--ink) !important;
  text-decoration:none;
}
#box-press a.aactu:hover{color:var(--teal) !important}
#box-press .nb{color:var(--muted); font-size:.75rem}
#box-press br+span.font1{display:inline-block; margin-top:8px}

/* Schema depannage : desormais en cartouches, comme panne/montage/cours */
#box-schema-depannage{
  display:flex;
  flex-direction:column;
}

/* Cartes texte : pannes resolues, montages, cours (pas d'image, meme
   esprit visuel que .actu-card) */
#box-panne .survol,
#box-schema-depannage .survol,
#box-ressource .survol{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px !important;
  margin-bottom:12px !important;
  transition:border-color .15s, background .15s;
  overflow:hidden;
  height:107px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}
#box-panne a:hover .survol,
#box-schema-depannage a:hover .survol,
#box-ressource .survol:hover{
  background:var(--white);
  border-color:var(--teal);
}
#box-panne .survol-head,
#box-schema-depannage .survol-head,
#box-ressource .survol-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
#box-panne .survol .fa-chevron-right,
#box-schema-depannage .survol .fa-chevron-right,
#box-ressource .survol .fa-chevron-right{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;height:24px;
  flex-shrink:0;
  background:none;
  color:var(--teal) !important;
  font-size:1.1rem;
}
/* Icone dediee par section (remplace la fleche generique) */
#box-panne .survol .fa-chevron-right:before{content:"\f0ad";font-family:FontAwesome !important} /* cle a molette */
#box-schema-depannage .survol .fa-chevron-right:before{content:"\f0e7";font-family:FontAwesome !important} /* eclair/schema */
#box-ressource .box-double:first-child .survol .fa-chevron-right:before{content:"\f1e6";font-family:FontAwesome !important} /* prise/branchement */
#box-ressource .box-double:last-child .survol .fa-chevron-right:before{content:"\f19d";font-family:FontAwesome !important} /* diplome/cours */
#box-panne .lientitreactu,
#box-schema-depannage .lientitreactu,
#box-ressource .lientitreactu{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700 !important;
  color:var(--ink) !important;
  font-size:.92rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  flex-shrink:1;
  text-decoration:none !important;
}
#box-panne .survol_desc,
#box-schema-depannage .survol_desc,
#box-ressource .survol_desc{
  margin:6px 0 0 0 !important;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}
#box-ressource .nb{
  display:inline-block;
  flex-shrink:0;
  font-family:'IBM Plex Mono',monospace;
  color:var(--copper) !important;
  background:rgba(200,113,45,.1);
  border:1px solid rgba(200,113,45,.3);
  border-radius:5px;
  padding:1px 6px;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-decoration:none !important;
  transition:background .15s, border-color .15s;
}
#box-ressource .nb:hover{
  background:rgba(200,113,45,.22);
  border-color:var(--copper);
}
#box-ressource .survol_desc{text-decoration:none; display:-webkit-box}

/* Grille pour les pannes resolues (8 items) et montages/cours (5-6 items) */
#box-panne{
  float:none !important;
  width:auto !important;
  margin-right:0 !important;
}
#box-schema-depannage{
  float:none !important;
  width:auto !important;
}

/* Boutons : meme pilule que .actu-more-btn, pour tous les .button de
   ces sections */
#box-press .button,
#box-depan .button,
#box-ressource .button{
  background:none !important;
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
  float:none !important;
  display:inline-block;
  margin:4px 8px 4px 0 !important;
}
#box-press .button a,
#box-depan .button a,
#box-ressource .button a{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  background:var(--teal) !important;
  color:#fff !important;
  padding:9px 16px !important;
  border-radius:20px !important;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.8rem;
  text-decoration:none !important;
  transition:background .15s;
}
#box-press .button a:hover,
#box-depan .button a:hover,
#box-ressource .button a:hover{
  background:var(--teal-dark) !important;
  color:#fff !important;
}

/* ===== responsive ===== */
@media only screen and (max-width:64em){
  #box-ressource{flex-direction:column}
}
@media only screen and (max-width:52em){
  #box-panne{grid-template-columns:1fr}
}

/* Cartouche "Acheter votre materiel" (emplacement affiliation) */
.pub-depannage-materiel{height:100%}
.pub-materiel-card{
  height:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  background:linear-gradient(160deg, var(--teal) 0%, var(--ink) 100%);
  border-radius:12px;
  padding:22px 20px;
  color:#fff;
}
.pub-materiel-icon{
  width:42px;height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  color:var(--copper-light);
  font-size:1.1rem;
  margin-bottom:4px;
}
.pub-materiel-card h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  margin:0;
}
.pub-materiel-card p{
  font-size:.82rem;
  color:rgba(255,255,255,.75);
  line-height:1.4;
  margin:0;
}
.pub-materiel-btn{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--copper);
  color:#fff !important;
  padding:9px 16px;
  border-radius:20px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.8rem;
  text-decoration:none !important;
  transition:background .15s, transform .15s;
}
.pub-materiel-btn:hover{
  background:var(--copper-light);
  transform:translateY(-1px);
}

@media only screen and (max-width:64em){
  #box-depan{flex-direction:column}
  #box-panne,#box-schema-depannage,#box-depan-pub{width:100% !important}
}

/* ============================================================
   Phase 3 : footer - inclus sur TOUTES les pages du site.
   Un seul fichier, effet immediat partout. Selecteurs deja
   specifiques au footer (#footer, #centerfooter, .col,
   #bottomfooter...), aucun risque de collision ailleurs.
   ============================================================ */
#footerpub{
  width:100% !important;
  max-width:1152px;
  margin:24px auto !important;
  box-sizing:border-box;
  padding:0 20px;
}
#footer{
  background:var(--ink) !important;
  width:100% !important;
  margin:32px 0 0 0 !important;
  padding:40px 0 32px 0 !important;
  color:#cfd8d6 !important;
  box-sizing:border-box;
}
#centerfooter{
  width:100% !important;
  max-width:1152px;
  margin:0 auto !important;
  box-sizing:border-box;
  padding:0 20px;
  display:grid;
  grid-template-columns:1.4fr repeat(5,1fr);
  gap:32px;
}
.col{
  display:block !important;
  vertical-align:top;
  min-width:0;
}
.col:first-child{
  width:auto !important;
  margin-right:0 !important;
  min-width:0;
}
.col:first-child img{
  width:164px;height:164px;
  border-radius:20px;
}
.col:first-child p{
  color:#9fb0ad;
  font-size:.85rem;
  line-height:1.5;
}
#centerfooter p.first,
#centerfooter ul li.first{
  text-transform:uppercase;
  font-weight:600 !important;
  letter-spacing:.05em;
  margin:0 0 12px 0 !important;
  padding:0 !important;
  font-size:.78rem !important;
  line-height:1.3 !important;
  color:var(--copper-light) !important;
  font-family:'IBM Plex Mono',monospace;
}
#centerfooter ul li.first a{color:var(--copper-light) !important}
#centerfooter ul{list-style:none; margin:0; padding:0}
#centerfooter ul li{margin-bottom:8px; font-size:.86rem !important; line-height:1.3 !important}
#centerfooter ul li a{
  color:#b7c4c2 !important;
  font-family:'Space Grotesk',sans-serif;
  font-size:.86rem;
  text-decoration:none !important;
  transition:color .15s;
}
#centerfooter ul li a:hover{color:#fff !important}
.icosocial{margin:12px 0 0 0 !important}
.icosocial a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff !important;
  font-size:1rem;
  transition:background .15s;
}
.icosocial a:hover{background:var(--teal)}

#bottomfooter{
  background:#0e1a1d !important;
  color:#8a9694 !important;
  margin-top:0 !important;
  padding:16px 0 !important;
}
#contenufooter,#lienfooter{
  width:100%;
  max-width:1152px;
  margin:0 auto !important;
  box-sizing:border-box;
  padding:0 20px;
  font-size:.76rem !important;
  text-align:center;
}
#contenufooter p,#lienfooter p{font-size:.76rem !important}
#bottomfooter a{color:#8a9694 !important; text-decoration:none !important}
#bottomfooter a:hover{color:#fff !important; text-decoration:underline !important}

@media only screen and (max-width:64em){
  #centerfooter{
    grid-template-columns:repeat(3,1fr);
    gap:28px 24px;
  }
  .col:first-child{grid-column:1/-1}
}
@media only screen and (max-width:52em){
  #centerfooter{grid-template-columns:1fr; gap:8px}
  .col:first-child{grid-column:1/-1}
}

/* Accordeon footer : MOBILE UNIQUEMENT desormais (52em, pas 64em) -
   la tablette garde le meme affichage complet que le desktop, sans
   accordeon. Le titre existant (.first) sert de declencheur visuel,
   petit chevron aligne dessus (pas de texte duplique). */
.footer-acc-check{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
.footer-acc-label{display:none}

@media only screen and (max-width:52em){
  .footer-acc-content{
    position:relative;
    padding-top:0;
  }
  .footer-acc-content li.first{
    padding-right:32px !important;
    border-bottom:1px solid rgba(255,255,255,.12);
    padding-bottom:12px !important;
  }
  .footer-acc-label{
    display:flex !important;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:0;right:0;
    width:28px;height:28px;
    cursor:pointer;
  }
  .footer-acc-label:after{
    content:'' !important;
    width:9px;height:9px;
    border-right:2px solid #9fb0ad;
    border-bottom:2px solid #9fb0ad;
    transform:rotate(45deg) !important;
    opacity:1 !important;
    transition:transform .2s;
    margin-top:-4px;
  }
  .footer-acc-check:checked ~ .footer-acc-label:after{transform:rotate(225deg) !important; margin-top:4px}
  .footer-acc-content li:not(.first){
    display:none;
  }
  .footer-acc-check:checked ~ li:not(.first){display:list-item}
  .footer-acc-check:checked ~ li:not(.first):first-of-type{margin-top:10px}
  .col{padding-bottom:4px}
}

/* ============================================================
   Phase 4 : gabarit de page partage (#contenu_g/#contenu_d,
   fil d'ariane .tabs). Utilise sur ~30 pages du site : un seul
   changement ici a un effet de levier sur la majorite des pages
   de contenu (meme principe que le footer).
   ============================================================ */

/* Structure principale : #contenu_g/#contenu_d etaient en largeur fixe
   (788px/300px) et float - meme piege que .container avant. Passage en
   flexbox fluide, jamais plus large qu'avant sur desktop. */
#contenu_g{
  width:auto !important;
  max-width:100%;
  flex:1;
  float:none !important;
  display:block !important;
  min-width:0;
  box-sizing:border-box;
  border:0 !important;
  background:none !important;
  margin-top:0 !important;
  overflow:visible !important;
  font-size:1.08rem;
}
#contenu_g .box{
  border:0 !important;
  background:none !important;
  margin-top:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
#contenu_d{
  width:300px !important;
  flex:0 0 300px;
  float:none !important;
  margin-left:10px !important;
  margin-top:0 !important;
  padding-top:0 !important;
  padding-left:18px !important;
  border-top:0;
  border-left:1px solid var(--line);
  box-sizing:border-box;
}
/* Un seul cartouche englobant (un seul cadre visuel), mais toujours
   deux colonnes cote a cote a l'interieur. Ciblage direct et fiable
   sur .page-layout (ajoute explicitement dans le HTML), plus robuste
   que :has() qui dependait de la structure exacte de chaque page. */
.page-layout{
  display:flex;
  align-items:flex-start;
  gap:24px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 4px 16px -8px rgba(19,35,39,.12);
  padding:24px;
  max-width:1152px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}
/* Les widgets qui avaient chacun leur propre cadre (colonne de droite)
   n'en ont plus besoin, ils sont deja dans le cartouche englobant.
   (regle complete un peu plus bas, section Phase 6) */

/* Fil d'ariane : fluide, plus discret, chevron cuivre */
.tabs{
  width:100% !important;
  max-width:1152px;
  margin:0 auto !important;
  padding:12px 20px 14px 20px !important;
  box-sizing:border-box;
  font-family:'IBM Plex Mono',monospace;
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--muted);
}
.tabs-item,.tabs-name{float:none !important; display:inline-flex !important; align-items:center; font-size:.72rem !important}
.tabs-item a,.tabs-name a{color:var(--muted) !important; text-decoration:none}
.tabs-item a:hover,.tabs-name a:hover{color:var(--teal) !important}
.tabs-item:after,.tabs-name:after{
  content:'\f105';
  font-family:FontAwesome;
  color:var(--copper);
  margin:0 8px;
}

/* Cartes actualite (liste, hors accueil) : meme esprit que .actu-card */
.actunews{
  display:flex;
  gap:16px;
  padding:16px !important;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:14px;
  transition:border-color .15s, box-shadow .15s;
}
a:hover > .actunews{
  border-color:var(--teal);
  box-shadow:0 12px 24px -14px rgba(19,35,39,.18);
}
.actunews .img{flex-shrink:0}
.actunews .img img{
  width:120px;height:90px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.actunews .contenu{min-width:0}
.actunews .date{
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;
  color:var(--muted);
}
.actunews .lientitreactu{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  color:var(--ink);
  font-size:1rem;
  margin:4px 0;
}
.actunews .txt{
  color:var(--muted);
  font-size:.85rem;
  line-height:1.4;
}

@media only screen and (max-width:64em){
  .page-layout{padding:20px; flex-direction:column}
  #contenu_d{
    width:100% !important;
    flex:none;
    padding-left:0 !important;
    border-left:0;
    margin-top:24px !important;
    padding-top:24px !important;
    border-top:1px solid var(--line);
  }
}
@media only screen and (max-width:52em){
  .actunews{flex-direction:row}
  .actunews .img img{width:90px;height:68px}
}

/* ============================================================
   Phase 5 : typographie et cartes partagees (h1.titre, .barre_titre,
   .survol). Utilisees sur 20 a 40 pages du site : gros effet de
   levier. Les regles specifiques a l'accueil (#box-panne .survol
   etc, deja en place) restent prioritaires grace a leur specificite
   plus elevee (ID + classe > classe seule).
   ============================================================ */

/* Neutralise globalement l'ancien accent rouge diagonal de .barre_titre
   (design d'origine), qui remontait encore sur les zones non scopees a
   l'accueil (ex: widgets de la colonne de droite). */
.barre_titre:before,.barre_titre:after{
  content:none !important;
  display:none !important;
}

/* Titre principal de page/article (h1.titre, sans .fond) */
.titre:not(.fond){
  background:none !important;
  color:var(--ink) !important;
  text-shadow:none !important;
  box-shadow:none !important;
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:700 !important;
  font-size:1.9rem !important;
  text-transform:none !important;
  line-height:1.25;
  margin:0 0 16px 0 !important;
  padding:0 !important;
}
@media only screen and (max-width:52em){
  .titre:not(.fond){font-size:1.4rem !important}
}
/* p.titre sert de repere secondaire (ex: "Actualite du jour" au-dessus
   du vrai titre h1) : plus petit et discret, pas une 2e grosse balise */
p.titre:not(.fond){
  font-size:1rem !important;
  font-family:'IBM Plex Mono',monospace !important;
  color:var(--copper) !important;
  text-transform:uppercase !important;
  letter-spacing:.06em;
  margin:0 0 10px 0 !important;
  display:flex;
  align-items:center;
  gap:10px;
}
p.titre:not(.fond):before{
  content:'';
  display:block !important;
  position:static !important;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 0 3px rgba(200,113,45,.18);
  flex-shrink:0;
}
p.titre:not(.fond):after{
  content:'';
  display:block !important;
  position:static !important;
  flex:1;
  height:2px;
  background:linear-gradient(90deg, var(--copper), transparent);
  max-width:80px;
}

/* Bandeau plein teal (.fond.txt_blanc) : remplace par le style "eyebrow"
   cuivre partout ou il apparait (coherent avec le reste du site) */
.fond.txt_blanc{
  background:none !important;
  color:var(--copper) !important;
  text-shadow:none !important;
  box-shadow:none !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:1.15rem !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em;
  padding:0 !important;
  margin:0 0 20px 0 !important;
  display:flex;
  align-items:center;
  gap:10px;
}
.fond.txt_blanc:before{
  content:'';
  display:block !important;
  position:static !important;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 0 3px rgba(200,113,45,.18);
  flex-shrink:0;
}
.fond.txt_blanc:after{
  content:'';
  display:block !important;
  position:static !important;
  flex:1;
  height:2px;
  background:linear-gradient(90deg, var(--copper), transparent);
  max-width:120px;
}

/* Sous-titres en cours d'article (h2.barre_titre) : sobre, sans le
   decor diagonal rouge de l'ancien design */
h2.barre_titre{
  background:none !important;
  color:var(--ink) !important;
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:700 !important;
  font-size:1.25rem !important;
  text-shadow:none !important;
  padding:0 !important;
  margin:28px 0 14px 0 !important;
  border-left:4px solid var(--teal);
  padding-left:12px !important;
}
h2.barre_titre:before,h2.barre_titre:after{content:none !important}

/* Grands separateurs de section ("A lire aussi", etc.) : style eyebrow
   cuivre, coherent avec l'accueil */
.barre_titre.font145.maj{
  background:none !important;
  color:var(--copper) !important;
  text-shadow:none !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:1rem !important;
  font-weight:600 !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:0 !important;
  margin:32px 0 18px 0 !important;
  display:flex;
  align-items:center;
  gap:10px;
}
.barre_titre.font145.maj:before{
  content:'' !important;
  display:block !important;
  position:static !important;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 0 3px rgba(200,113,45,.18);
  flex-shrink:0;
}
.barre_titre.font145.maj:after{
  content:'' !important;
  display:block !important;
  position:static !important;
  flex:1;
  height:2px;
  background:linear-gradient(90deg, var(--copper), transparent);
  max-width:120px;
}

/* Cartes de listing (montages, cours, dossiers, logiciels) : meme
   esprit que les cartes de l'accueil, mais generiques (pas d'icone
   dediee puisqu'utilisees sur plusieurs types de contenu a la fois) */
.survol{
  background:var(--paper) !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  padding:16px 18px !important;
  margin-bottom:14px !important;
  transition:border-color .15s, background .15s;
}
a:hover > .survol{
  background:var(--white) !important;
  border-color:var(--teal) !important;
}
.survol .fa-chevron-right{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  color:var(--teal) !important;
  font-size:1rem;
  float:left;
  margin-right:8px;
}
.survol .lientitreactu,.survol .titrebold{
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:700 !important;
  color:var(--ink) !important;
  font-size:1rem !important;
}
.survol .nb{
  display:inline-block;
  margin-left:8px;
  font-family:'IBM Plex Mono',monospace;
  color:var(--copper) !important;
  background:rgba(200,113,45,.1);
  border:1px solid rgba(200,113,45,.3);
  border-radius:5px;
  padding:1px 6px;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-decoration:none !important;
  transition:background .15s, border-color .15s;
}
.survol .nb:hover{
  background:rgba(200,113,45,.22);
  border-color:var(--copper);
}
.survol_desc{
  margin:6px 0 0 0 !important;
  color:var(--muted) !important;
  font-size:.88rem;
  line-height:1.5;
}

/* ============================================================
   Phase 6 : colonne de droite (#contenu_d, widgets menu.php) dans
   le contexte des pages actualite. Cartouche + boutons + liste
   (ex-carrousel jQuery, remplace par une liste statique).
   ============================================================ */
#contenu_d .box{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0 !important;
  margin-bottom:24px !important;
  border-top:1px solid var(--line);
  padding-top:24px !important;
}
#contenu_d .box:first-child{border-top:0; padding-top:0 !important}
#contenu_d .box:last-child{margin-bottom:0 !important}
#contenu_d .box a{color:var(--ink); text-decoration:none}
#contenu_d .box a:hover{color:var(--teal)}
#contenu_d .box .fa-chevron-right{color:var(--copper); font-size:.75rem; margin-right:4px}

/* Widget "Actualite electronique" (ex jcarousel-actu) */
.sidebar-actu-list{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.actu_d{
  display:flex !important;
  gap:12px;
  padding:0 !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--line);
  padding-bottom:12px !important;
}
.sidebar-actu-list .actu_d:last-child{border-bottom:0; padding-bottom:0 !important}
.img_d{width:80px !important; flex-shrink:0; float:none !important; min-width:0 !important}
.img_d img{
  width:80px !important;height:60px;
  object-fit:cover;
  border-radius:6px;
  border:none !important;
}
.contenu_d{min-width:0; font-size:.85rem; color:var(--ink); line-height:1.35}
.contenu_d .date{
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;
  color:var(--muted);
}

/* Boutons pleine largeur des widgets colonne de droite */
.button_actu,
#contenu_d .button.buttonright{
  background:none !important;
  border:none !important;
  padding:0 !important;
  float:none !important;
}
.button_actu a,
#contenu_d .button.buttonright a{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--teal) !important;
  color:#fff !important;
  padding:9px 14px !important;
  border-radius:20px !important;
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:600;
  font-size:.8rem !important;
  text-decoration:none !important;
  text-transform:none !important;
  transition:background .15s;
}
.button_actu a:hover,
#contenu_d .button.buttonright a:hover{
  background:var(--teal-dark) !important;
  color:#fff !important;
}

@media only screen and (max-width:52em){
  .img_d,.img_d img{width:64px !important;height:48px}
}

/* ============================================================
   Phase 7 : formulaires "Ajouter" (actu, montage, cours, etc.)
   Champs/bouton generiques, coherent avec le reste du site.
   ============================================================ */
#contenu_g form input[type="text"],
#contenu_g form input[type="email"],
#contenu_g form input[type="password"],
#contenu_g form select,
#contenu_g form textarea{
  width:100% !important;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  padding:10px 14px !important;
  margin:6px 0 !important;
  font-family:'Space Grotesk',sans-serif;
  font-size:.92rem;
  color:var(--ink);
  background:var(--paper);
}
#contenu_g form input[type="text"]:focus,
#contenu_g form input[type="email"]:focus,
#contenu_g form select:focus,
#contenu_g form textarea:focus{
  outline:none;
  border-color:var(--teal) !important;
  background:var(--white);
}
#contenu_g form p.submit,
#contenu_g form input[type="submit"]{
  margin-top:12px !important;
}
#contenu_g form input[type="submit"]{
  float:none !important;
  width:auto !important;
  background:var(--teal) !important;
  color:#fff !important;
  border:none !important;
  border-radius:22px !important;
  padding:11px 28px !important;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  transition:background .15s;
}
#contenu_g form input[type="submit"]:hover{background:var(--teal-dark) !important}
#contenu_g form p{color:var(--muted); font-size:.85rem}
#contenu_g form p font[color="#FF0000"]{color:var(--copper) !important}

/* Badge categorie sur la page article, meme esprit que les badges de
   l'accueil, cliquable vers la categorie */
.actu-cat-badge{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  color:var(--copper) !important;
  background:rgba(200,113,45,.1);
  border:1px solid rgba(200,113,45,.3);
  border-radius:6px;
  padding:3px 10px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-decoration:none !important;
  margin-bottom:10px;
  transition:background .15s, border-color .15s;
}
.actu-cat-badge:hover{
  background:rgba(200,113,45,.22);
  border-color:var(--copper);
}

/* ============================================================
   Phase 8 : liste "Actualite du jour" - grille + pagination
   Tout est scope sous .actunews-grid pour ne pas affecter les
   4 autres pages qui utilisent .actunews en affichage ligne.
   ============================================================ */
.actunews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:20px 0;
  min-width:0;
}
.actunews-grid .actunews{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0 !important;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:0;
  transition:border-color .15s, box-shadow .15s;
}
.actunews-grid .actunews:hover{
  border-color:var(--teal);
  box-shadow:0 12px 24px -14px rgba(19,35,39,.18);
}
.actunews-grid .actunews .img{width:100% !important; float:none !important; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--paper)}
.actunews-grid .actunews .img img{width:100%;height:100%;object-fit:cover;display:block}
.actunews-grid .actunews .contenu{width:auto !important; float:none !important; padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; min-width:0; box-sizing:border-box}
.actunews-grid .actunews .meta-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  min-width:0;
}
.actunews-grid .actunews .actu-cat-badge{
  margin-bottom:0;
  flex-shrink:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:2px 8px;
  font-size:.6rem;
}
.actunews-grid .actunews .date{
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
}
.actunews-grid .actunews .lientitreactu{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  color:var(--ink);
  font-size:.92rem;
  line-height:1.3;
  margin:0;
  text-decoration:none;
  overflow-wrap:break-word;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.actunews-grid a:hover .lientitreactu{color:var(--teal)}

/* Pagination en cercles, nos couleurs (inspire de la reference fournie) */
.actu-pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  justify-content:center;
  margin:32px 0 12px;
}
.actu-pagi-num,.actu-pagi-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  border-radius:50%;
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.78rem;
  text-decoration:none !important;
  transition:background .15s, color .15s;
  flex-shrink:0;
}
.actu-pagi-num:hover{background:rgba(0,105,92,.12); color:var(--teal)}
.actu-pagi-active{
  background:var(--teal) !important;
  color:#fff !important;
}
.actu-pagi-nav{background:var(--ink); color:#fff}
.actu-pagi-nav:hover{background:var(--teal)}
.actu-pagi-dots{color:var(--muted); padding:0 2px}

@media only screen and (max-width:64em) and (min-width:52.01em){
  .actunews-grid{grid-template-columns:repeat(2,1fr)}
}
@media only screen and (max-width:52em){
  .actunews-grid{grid-template-columns:1fr}
  .actu-pagi-num,.actu-pagi-nav{width:34px; height:34px; font-size:.72rem}
}

/* ============================================================
   Phase 9 : corps de l'article (.article-content) - texte, titres,
   images, liens. Scope uniquement au contenu de l'article, aucun
   risque pour le reste de la page.
   ============================================================ */
.article-content{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.08rem;
  line-height:1.7;
  color:var(--ink);
  min-width:0;
  overflow-wrap:break-word;
}
.article-content iframe{
  max-width:100%;
}
.article-content p{
  margin:0 0 18px 0;
}
.article-content h2{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.4rem;
  color:var(--ink);
  margin:32px 0 14px 0;
  border-left:4px solid var(--teal);
  padding-left:12px;
}
.article-content h3{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.2rem;
  color:var(--ink);
  margin:26px 0 12px 0;
}
.article-content h4{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:1.05rem;
  color:var(--teal);
  margin:22px 0 10px 0;
}
.article-content img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:12px;
  margin:24px auto;
}
.article-content a{
  color:var(--teal);
  text-decoration:underline;
  text-decoration-color:rgba(0,105,92,.35);
  text-underline-offset:2px;
  transition:color .15s;
}
.article-content a:hover{color:var(--teal-dark)}
.article-content ul,.article-content ol{
  margin:0 0 18px 0;
  padding-left:24px;
  line-height:1.7;
}
.article-content li{margin-bottom:6px}
.article-content blockquote{
  margin:20px 0;
  padding:14px 20px;
  border-left:4px solid var(--copper);
  background:var(--paper);
  border-radius:0 8px 8px 0;
  color:var(--muted);
  font-style:italic;
}
.article-content strong{color:var(--ink)}

@media only screen and (max-width:52em){
  .article-content{font-size:1rem}
  .article-content h2{font-size:1.2rem}
  .article-content h3{font-size:1.08rem}
}

/* ============================================================
   Phase 10 : image principale de l'article, liens tendance,
   pastilles sur les titres de la colonne de droite
   ============================================================ */
.article-hero-img{
  text-align:center;
  width:100%;
  overflow:hidden;
  margin-bottom:40px;
}
.article-hero-img img{
  width:100%;
  display:block;
  border-radius:14px;
}

/* Liens dans l'article : soulignement anime au survol, plus moderne
   qu'un simple soulignement statique */
.article-content a{
  color:var(--teal);
  text-decoration:none;
  background-image:linear-gradient(var(--teal), var(--teal));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:background-size .25s ease, color .15s ease;
  padding-bottom:1px;
}
.article-content a:hover{
  color:var(--teal-dark);
  background-size:100% 2px;
}

/* Pastille + trait sur TOUS les titres eyebrow de la colonne de droite
   (deja actif ailleurs via .barre_titre.font145.maj, ici on s'assure
   que le contexte #contenu_d ne l'ecrase pas) */
#contenu_d .barre_titre.font145.maj{
  display:flex !important;
  align-items:center;
  gap:10px;
}

/* ============================================================
   Phase 11 : boutons categorie ronds en haut de la liste generale
   (remplace le widget "D'autres actualites" de la colonne de droite
   sur cette page precise)
   ============================================================ */
.actu-cat-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 26px 0;
}
.actu-cat-filter-btn{
  display:inline-flex;
  align-items:center;
  background:var(--paper);
  color:var(--ink) !important;
  border:1px solid var(--line);
  border-radius:20px;
  padding:8px 18px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.85rem;
  text-decoration:none !important;
  transition:background .15s, border-color .15s, color .15s;
}
.actu-cat-filter-btn:hover{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff !important;
}

@media only screen and (max-width:52em){
  .actu-cat-filter{gap:8px}
  .actu-cat-filter-btn{padding:7px 14px; font-size:.8rem}
}

/* ============================================================
   Phase 12 : visuel de remplacement (vieux articles sans image),
   interligne des <li> reduit, harmonisation des tailles de texte
   ============================================================ */
.img-fallback{
  width:100%;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg, var(--teal) 0%, var(--ink) 100%);
  color:rgba(255,255,255,.35);
  font-size:2.2rem;
}

/* Interligne des listes (sidebar, contenu article, etc.) plus resserre */
li{line-height:1.35}

/* Textes par defaut a la meme taille que le corps de l'article, pour
   coherence generale sur les pages qui n'ont pas de taille dediee */
#contenu_g p,#contenu_g li,#contenu_g td,#contenu_g th{font-size:1.08rem !important}

/* ============================================================
   Phase 13 : page "Lu dans la presse electronique" - liste
   groupee par date, items en petites cartes, pagination stylee
   ============================================================ */
.presse-date{
  margin-top:28px !important;
}
.presse-date:first-of-type{margin-top:0 !important}
.presse-item{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:6px 12px;
  margin-bottom:0;
  border-radius:8px;
  text-decoration:none !important;
  transition:background .15s;
  line-height:1.4;
}
.presse-item:hover{background:var(--paper)}
.presse-heure{
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;
  color:var(--muted);
  flex-shrink:0;
  width:42px;
}
.presse-titre{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  color:var(--ink);
  font-size:.92rem;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.presse-item:hover .presse-titre{color:var(--teal)}
.presse-site{
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;
  color:var(--copper);
  flex-shrink:0;
  white-space:nowrap;
}

/* Pagination barre_navigation() (URLs propres presse-titre-flux-N.html) :
   meme habillage pilule que les autres pages */
.barre_navig{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  justify-content:center;
  margin:24px 0 !important;
}
.barre_navig a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border:0 !important;
  border-radius:50%;
  background:var(--paper);
  color:var(--ink) !important;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.8rem;
  text-decoration:none !important;
  flex-shrink:0;
}
/* Precedent/Suivant contiennent une icone + du texte : on cache le
   texte pour ne garder que l'icone (comme .actu-pagi-nav) */
.barre_navig a:has(i){
  font-size:0 !important;
  background:var(--ink) !important;
  color:#fff !important;
}
.barre_navig a:has(i) i{font-size:.85rem !important}
.barre_navig a:has(i):hover{background:var(--teal) !important}
.barre_navig a:hover{background:rgba(0,105,92,.12) !important; border:0 !important; color:var(--teal) !important}
.barre_navig a.active{
  background:var(--teal) !important;
  color:#fff !important;
  border:0 !important;
}

@media only screen and (max-width:52em){
  .presse-item{flex-wrap:wrap}
  .presse-site{order:3; width:100%; padding-left:52px}
}

/* Bouton "Lire l'actualite / En savoir plus" (page article presse) */
.presse-lire-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--teal);
  color:#fff !important;
  padding:11px 24px;
  border-radius:24px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.88rem;
  text-decoration:none !important;
  transition:background .15s, transform .15s;
}
.presse-lire-btn:hover{
  background:var(--teal-dark);
  color:#fff !important;
  transform:translateY(-1px);
}

/* Date/heure meta des pages article (actu.php, presse.php) : protection
   contre la regle globale p{font-size:1.08rem} */
.article-meta-date{font-size:.78rem !important}

/* ============================================================
   Phase 14 : modale native (remplace FancyBox, aucune dependance
   externe). Utilisee pour les popups "probleme avec le lien" /
   "contacter l'auteur" sur les pages montage/cours/logiciel/
   depannage.
   ============================================================ */
#lelec-modal{
  border:none;
  border-radius:16px;
  padding:0;
  width:min(480px, 92vw);
  max-height:80vh;
  box-shadow:0 24px 60px -12px rgba(19,35,39,.35);
}
#lelec-modal::backdrop{
  background:rgba(19,35,39,.55);
  backdrop-filter:blur(2px);
}
#lelec-modal iframe{
  width:100%;
  height:min(560px, 75vh);
  border:none;
  display:block;
}
.lelec-modal-close{
  position:absolute;
  top:10px;right:10px;
  width:34px;height:34px;
  border-radius:50%;
  border:none;
  background:var(--ink);
  color:#fff;
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  transition:background .15s;
}
.lelec-modal-close:hover{background:var(--teal)}

/* ============================================================
   Phase 15 : icone dediee pour les cartes de la page cours
   (diplome, comme sur l'accueil #box-ressource)
   ============================================================ */
.cours-page .survol .fa-chevron-right:before{content:"\f19d";font-family:FontAwesome !important}

/* ============================================================
   Phase 16 : contenu des popups (popup.php, dans l'iframe de la
   modale native) - corps + formulaire, charte conforme
   ============================================================ */
body:has(.lelec-popup-body){
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  color:var(--ink);
  background:var(--white) !important;
}
.lelec-popup-body{
  margin:0 !important;
  width:auto !important;
  padding:24px !important;
  box-sizing:border-box;
}
.lelec-popup-body p{
  font-size:.88rem !important;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 12px 0;
}
.lelec-popup-form input[type="text"],
.lelec-popup-form input[type="email"],
.lelec-popup-form textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  padding:10px 14px !important;
  margin:0 0 12px 0 !important;
  font-family:'Space Grotesk',sans-serif;
  font-size:.88rem;
  color:var(--ink);
  background:var(--paper);
}
.lelec-popup-form input[type="text"]:focus,
.lelec-popup-form input[type="email"]:focus,
.lelec-popup-form textarea:focus{
  outline:none;
  border-color:var(--teal) !important;
  background:var(--white);
}
.lelec-popup-form input[type="submit"]{
  float:none !important;
  width:auto !important;
  background:var(--teal) !important;
  color:#fff !important;
  border:none !important;
  border-radius:22px !important;
  padding:10px 26px !important;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.85rem;
  cursor:pointer;
  transition:background .15s;
}
.lelec-popup-form input[type="submit"]:hover{background:var(--teal-dark) !important}

/* ============================================================
   Phase 17 : etat "aucun cours disponible" (categorie vide)
   ============================================================ */
.cours-vide{
  text-align:center;
  padding:40px 20px 20px;
}
.cours-vide-heading{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.5rem;
  color:var(--ink);
  margin:0 0 10px 0 !important;
}
.cours-vide-titre{
  font-size:1.08rem !important;
  color:var(--muted);
  margin:0 !important;
}
.cours-vide-titre .fa{color:var(--copper); margin-right:6px}
.cours-vide-boutons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  margin-top:100px;
}
.actu-more-btn-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 24px;
  border-radius:24px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.88rem;
  text-decoration:none !important;
  transition:background .15s, color .15s, transform .15s;
  background:var(--paper);
  color:var(--ink) !important;
  border:1px solid var(--line);
}
.actu-more-btn-inline:hover{
  background:var(--white);
  border-color:var(--teal);
  color:var(--teal) !important;
}
.actu-more-btn-inline.actu-more-btn-primary{
  background:var(--teal);
  color:#fff !important;
  border:none;
}
.actu-more-btn-inline.actu-more-btn-primary:hover{
  background:var(--teal-dark);
  color:#fff !important;
  transform:translateY(-1px);
}

@media only screen and (max-width:52em){
  .cours-vide-boutons{margin-top:60px; flex-direction:column}
}

/* Description du cours (resume) et liens d'info (probleme/contact) :
   taille alignee sur le corps de texte du site */
.cours-description{
  font-size:1.08rem !important;
  line-height:1.6;
  color:var(--ink);
}
.cours-lien-info{
  font-size:1.08rem !important;
  color:var(--teal) !important;
  text-decoration:none !important;
}
.cours-lien-info:hover{text-decoration:underline !important}
.cours-lien-info .fa{color:var(--copper); margin-right:4px}

/* Icone dediee pour les cartes de la page montage (prise/branchement,
   comme sur l'accueil #box-ressource) */
.montage-page .survol .fa-chevron-right:before{content:"\f1e6";font-family:FontAwesome !important}

/* Icone dediee pour les cartes de la page logiciel (code source) */
.logiciel-page .survol .fa-chevron-right:before{content:"\f121";font-family:FontAwesome !important}

/* Icone dediee pour les cartes de la page dossier (dossier/classeur) */
.dossier-page .survol .fa-chevron-right:before{content:"\f07c";font-family:FontAwesome !important}

/* Icone dediee pour la page schema de depannage */
.schema-page .survol .fa-chevron-right:before{content:"\f0ad";font-family:FontAwesome !important}

/* Icone dediee pour les cartes panne sur la page hub depannage */
.depannage-page .survol .fa-chevron-right:before{content:"\f0ad";font-family:FontAwesome !important}

/* Couleur des liens par defaut dans le contenu principal, conforme
   a la charte (au lieu du bleu/noir herite de l'ancien CSS) */
#contenu_g a:not(.actu-more-btn a):not(.actu-more-btn-inline):not(.cours-lien-info):not(.actu-cat-filter-btn):not(.presse-item):not(.presse-lire-btn):not(.lientitreactu):not(.nb){
  color:var(--teal);
}
#contenu_g a:not(.actu-more-btn a):not(.actu-more-btn-inline):not(.cours-lien-info):not(.actu-cat-filter-btn):not(.presse-item):not(.presse-lire-btn):not(.lientitreactu):not(.nb):hover{
  color:var(--teal-dark);
}

/* Icone dediee pour "Les derniers schemas ajoutes" (page schema) */
.derniers-schemas .fa-chevron-right:before{content:"\f0e7";font-family:FontAwesome !important}

/* Formulaires de recherche dans la colonne de droite (menu.php :
   chassis, panne, schema, notice) - meme charte que les formulaires
   du contenu principal, adaptee a la largeur reduite de la sidebar */
#contenu_d form select,
#contenu_d form input[type="text"]{
  width:100% !important;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  padding:9px 12px !important;
  margin:6px 0 !important;
  font-family:'Space Grotesk',sans-serif;
  font-size:.85rem;
  color:var(--ink);
  background:var(--paper);
}
#contenu_d form select:focus,
#contenu_d form input[type="text"]:focus{
  outline:none;
  border-color:var(--teal) !important;
  background:var(--white);
}
#contenu_d form input[type="submit"]{
  display:block;
  float:none !important;
  clear:both;
  width:auto !important;
  background:var(--teal) !important;
  color:#fff !important;
  border:none !important;
  border-radius:20px !important;
  padding:8px 20px !important;
  margin-top:10px !important;
  margin-bottom:10px !important;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:.82rem;
  cursor:pointer;
  transition:background .15s;
}
#contenu_d form input[type="submit"]:hover{background:var(--teal-dark) !important}

/* Icone dediee pour les cartes panne resolue (cle a molette, coherent
   avec le reste de la section depannage) */
.panne-page .survol .fa-chevron-right:before{content:"\f0ad";font-family:FontAwesome !important}

/* ============================================================
   Listes de pannes/marques en colonnes responsive (remplace les
   largeurs fixes en dur + float, source de problemes en mobile) :
   .panne-marques-list  : 4 colonnes desktop, 2 tablette, 1 mobile
   .panne-recentes-list : 2 colonnes desktop et tablette, 1 mobile
   ============================================================ */
.panne-marques-list{
  column-count:4;
  column-gap:24px;
  margin:0 auto;
}
.panne-marques-item{
  break-inside:avoid;
  padding:4px 0;
  font-size:.95rem;
}
.panne-marques-item .fa-chevron-right{color:var(--copper); margin-right:6px; font-size:.85em}
.panne-marques-item a{color:var(--ink)}
.panne-marques-item a:hover{color:var(--teal)}

.panne-recentes-list{
  column-count:2;
  column-gap:32px;
  margin:0 auto;
}
.panne-recentes-item{
  break-inside:avoid;
  padding:4px 0;
  font-size:.9rem;
}
.panne-recentes-item .fa-chevron-right{color:var(--copper); margin-right:6px; font-size:.85em}
.panne-recentes-item a{color:var(--teal)}
.panne-recentes-item a:hover{color:var(--teal-dark)}

/* Liste deroulante mobile pour un bloc "choisir une marque"
   (.marques-index-block) : sur petit ecran, une longue liste de
   marques en 1 colonne est plus penible a parcourir qu'un select
   compact. Scope volontairement etroit (uniquement a l'interieur de
   .marques-index-block) pour ne pas affecter les autres usages de
   .panne-marques-list ailleurs sur le site (ex: filtrage par type
   sur la page d'une marque specifique, qui reste en liste colonnes
   sur tous les formats).
   Reutilise sur : depannage/panne-resolue/index.php,
   depannage/schema/index.php. */
.marques-index-block .panne-marques-select{
  display:none;
}

@media only screen and (max-width:64em) and (min-width:36.01em){
  .panne-marques-list{column-count:2}
}
@media only screen and (max-width:36em){
  .panne-marques-list{column-count:1}
  .panne-recentes-list{column-count:1}
  .marques-index-block .panne-marques-list,
  .marques-index-block .notice-3col-list{display:none}
  /* Meme style que les champs de recherche de la colonne de droite
     (#contenu_d form select, voir menu.php) */
  .marques-index-block .panne-marques-select{
    display:block;
    width:100% !important;
    max-width:100%;
    box-sizing:border-box;
    border:1px solid var(--line) !important;
    border-radius:8px !important;
    padding:9px 12px !important;
    margin:6px 0 !important;
    font-family:'Space Grotesk',sans-serif;
    font-size:.85rem;
    color:var(--ink);
    background:var(--paper);
  }
  .marques-index-block .panne-marques-select:focus{
    outline:none;
    border-color:var(--teal) !important;
    background:var(--white);
  }
}

/* Liste notices en 3 colonnes (desktop), 2 (tablette), 1 (mobile) */
.notice-3col-list{
  column-count:3;
  column-gap:24px;
  margin:0 auto;
}
.notice-3col-item{
  break-inside:avoid;
  padding:4px 0;
  font-size:.9rem;
}
.notice-3col-item .fa-chevron-right{color:var(--copper); margin-right:6px; font-size:.85em}
.notice-3col-item a{color:var(--teal)}
.notice-3col-item a:hover{color:var(--teal-dark)}

@media only screen and (max-width:64em) and (min-width:36.01em){
  .notice-3col-list{column-count:2}
}
@media only screen and (max-width:36em){
  .notice-3col-list{column-count:1}
}

/* Icone dediee pour les cartes notice (page mode-d-emploi) */
.notice-page .survol .fa-chevron-right:before{content:"\f0e6";font-family:FontAwesome !important}

/* Tableau equivalent chassis (modele/chassis) : vrai tableau semantique,
   responsive - empile les colonnes sur mobile */
.chassis-table-wrap{
  overflow-x:auto;
  margin:0 auto;
}
.chassis-table{
  width:100%;
  max-width:600px;
  margin:0 auto;
  border-collapse:collapse;
}
.chassis-table th{
  text-align:left;
  font-family:'Space Grotesk',sans-serif;
  font-size:.82rem;
  color:var(--copper);
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:8px 12px;
  border-bottom:2px solid var(--line);
}
.chassis-table td{
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.chassis-table td .fa-chevron-right{color:var(--copper); margin-right:6px; font-size:.85em}
.chassis-table td a{color:var(--teal)}
.chassis-table td a:hover{color:var(--teal-dark)}
.chassis-table tr:hover td{background:var(--paper)}

@media only screen and (max-width:36em){
  .chassis-table, .chassis-table thead, .chassis-table tbody, .chassis-table th, .chassis-table td, .chassis-table tr{
    display:block;
  }
  .chassis-table tr:first-child{display:none}
  .chassis-table tr{border-bottom:2px solid var(--line); padding:8px 0}
  .chassis-table td{border:none; padding:4px 12px}
  .chassis-table td:first-child{font-weight:600}
  .chassis-table td:last-child:before{content:"\21b3  "; color:var(--copper)}
}

/* Icone dediee pour les cartes de la page equivalent chassis */
.chassis-page .survol .fa-chevron-right:before{content:"\f108";font-family:FontAwesome !important}

/* Page technique de reparation : la colonne texte (70%) doit passer a
   100% quand la colonne image (30%, .mobilecache) se masque en mobile,
   sinon elle reste coincee a 70% de largeur pour rien */
@media screen and (max-width:480px){
  .technique-page div[style*="width:70%"]{
    width:100% !important;
    float:none !important;
  }
}

/* Icone dediee pour la page technique */
.technique-page .survol .fa-chevron-right:before{content:"\f0ad";font-family:FontAwesome !important}

/* Bandeau resultat "Le modele X a pour chassis Y" : carte discrete
   avec accent cuivre, ne rivalise plus avec le H1 juste au-dessus
   (ancien bug : reutilisait par erreur la classe .fd_head du bandeau
   contact tout en haut du site, d'ou le bandeau noir) */
.chassis-result-banner{
  text-align:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:4px solid var(--copper);
  border-radius:8px;
  padding:14px 20px;
  margin-bottom:40px;
  font-size:1.1rem;
  color:var(--ink);
}
.chassis-result-banner strong{color:var(--teal)}

/* Sous-titres de section (Informations complementaires, pannes, schemas
   associes) : style sobre coherent avec le reste du site plutot que du
   texte noir brut sans mise en forme */
.chassis-subheading{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.15rem;
  color:var(--ink);
  border-left:4px solid var(--teal);
  padding-left:12px;
  margin:28px 0 14px 0;
}

/* Encart d'avertissement (.important) : remplace l'ancien style rose/rouge
   par un encart coherent avec la charte (accent cuivre, sobre) */
.important{
  border:none !important;
  border-left:4px solid var(--copper) !important;
  border-radius:8px !important;
  background:rgba(200,113,45,.08) !important;
  color:var(--ink) !important;
  padding:14px 18px !important;
  margin:16px 0 !important;
  font-size:.95rem;
}

/* ============================================================
   Pagination : ne jamais laisser la fleche "suivant" seule sur une
   2e ligne. Les marges/paddings de l'ancien CSS (style-min.css)
   elargissaient l'ecart entre pastilles et faisaient deborder la
   rangee sur mobile. Remise a zero + pastilles plus compactes sur
   petit ecran. S'applique a toutes les pages (.barre_navig et
   .actu-pagination).
   ============================================================ */
.barre_navig a,
.barre_navig span,
.actu-pagi-num,
.actu-pagi-nav{
  margin:0 !important;
  box-sizing:border-box;
}
.barre_navig,
.actu-pagination{
  row-gap:8px;
}
/* Tablette / petit desktop : taille et ecart normaux, on ne compacte pas */
@media only screen and (max-width:52em){
  .barre_navig,
  .actu-pagination{gap:10px}
}
/* Grand telephone : legerement compact, ecart confortable */
@media only screen and (max-width:36em){
  .barre_navig,
  .actu-pagination{gap:8px}
  .barre_navig a,
  .actu-pagi-num,
  .actu-pagi-nav{
    width:32px;
    height:32px;
    font-size:.74rem;
  }
}
/* Petit telephone : compact pour tenir sur une ligne */
@media only screen and (max-width:26em){
  .barre_navig,
  .actu-pagination{gap:4px}
  .barre_navig a,
  .actu-pagi-num,
  .actu-pagi-nav{
    width:30px;
    height:30px;
    font-size:.7rem;
  }
}

/* ============================================================
   Titres "eyebrow" (pastille cuivre + trait) : quand le titre passe
   sur 2 lignes ou plus, la pastille et le trait restent alignes sur
   la PREMIERE ligne (avant : centres verticalement sur tout le bloc).
   Hauteur de ligne fixee a 1.3 : la demi-ligne vaut .65em, on retire
   la moitie de la pastille (4px) / du trait (1px) pour centrer.
   ============================================================ */
.actu-section h2.titre,
#box-press h2.barre_titre,
#box-depan h2.titre,
#box-panne h2.barre_titre,
#box-schema-depannage h2.barre_titre,
#box-ressource h2.titre,
p.titre:not(.fond),
.fond.txt_blanc,
.barre_titre.font145.maj,
#contenu_d .barre_titre.font145.maj{
  align-items:flex-start !important;
  line-height:1.3;
}
.actu-section h2.titre:before,
#box-press h2.barre_titre:before,
#box-depan h2.titre:before,
#box-panne h2.barre_titre:before,
#box-schema-depannage h2.barre_titre:before,
#box-ressource h2.titre:before,
p.titre:not(.fond):before,
.fond.txt_blanc:before,
.barre_titre.font145.maj:before{
  margin-top:calc(.65em - 4px) !important;
}
.actu-section h2.titre:after,
#box-press h2.barre_titre:after,
#box-depan h2.titre:after,
#box-panne h2.barre_titre:after,
#box-schema-depannage h2.barre_titre:after,
#box-ressource h2.titre:after,
p.titre:not(.fond):after,
.fond.txt_blanc:after,
.barre_titre.font145.maj:after{
  margin-top:calc(.65em - 1px) !important;
}