/* ============================================================
   Référence Média — Feuille de style principale
   ============================================================ */

:root{
  --ink:#241f1c;
  --paper:#fffdfd;
  --paper-dim:#fbeeec;
  --orange:#e34526;
  --orange-deep:#b8341a;
  --grey:#8b8d91;
  --grey-deep:#6e7175;
  --line:#f0dcd9;
  --muted:#6b6259;
  --success:#2e7d4f;
  --display: "Fraunces", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:linear-gradient(180deg,#fffefe 0%,#fefaf9 30%,#fdf5f4 60%,#fbeeec 100%);
  background-attachment:fixed;
  line-height:1.6;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px);}
.wrap-narrow{max-width:900px;margin:0 auto;padding:0 clamp(20px,5vw,48px);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px;}

/* ---------- Top bar ---------- */
.topbar{border-bottom:1px solid var(--line); background:var(--paper);}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px clamp(20px,5vw,48px); font-size:.82rem;
  max-width:1180px; margin:0 auto;
}
.topbar ul{list-style:none; display:flex; gap:22px; margin:0; padding:0; flex-wrap:wrap;}
.topbar a{text-decoration:none; color:var(--muted);}
.topbar a:hover{color:var(--orange);}
.topbar .social{display:flex; gap:14px;}
.lang-switch{font-weight:600; letter-spacing:.04em; text-decoration:none;}
.lang-switch-disabled{color:var(--grey); cursor:not-allowed; opacity:.6;}

/* ---------- Header ---------- */
header.main{background:var(--paper); border-bottom:1px solid var(--line); position:relative; z-index:100;}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,48px); max-width:1180px; margin:0 auto; gap:24px;
}
.logo{display:flex; align-items:center; text-decoration:none; white-space:nowrap;}
.logo img{height:88px; width:auto;}
.main-nav{flex:1;}
.main-nav > ul{list-style:none; display:flex; gap:26px; margin:0; padding:0; font-size:.95rem; font-weight:500; justify-content:center;}
.main-nav a{text-decoration:none;}
.main-nav > ul > li{position:relative;}
.main-nav > ul > li.current > a, .main-nav > ul > li > a:hover{color:var(--orange);}
.header-actions{display:flex; align-items:center; gap:14px;}

.cta-btn{
  display:inline-block; border:1.5px solid var(--ink); padding:10px 22px; border-radius:2px;
  text-decoration:none; font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; cursor:pointer;
  background:none; color:var(--ink); font-family:var(--body);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.cta-btn:hover{background:var(--ink); color:var(--paper);}
.cta-btn.solid{background:var(--orange); border-color:var(--orange); color:#fff;}
.cta-btn.solid:hover{background:var(--orange-deep); border-color:var(--orange-deep);}
.cta-btn.small{padding:7px 16px; font-size:.72rem;}

.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle svg{width:26px;height:26px;stroke:var(--ink);}
.mobile-only-cta{display:none;}
.nav-close{display:none;}
.nav-overlay{display:none;}

@media (max-width: 900px){
  .nav-overlay{
    display:none; position:fixed; inset:0; background:rgba(20,18,15,.45); z-index:90;
  }
  .nav-overlay.show{display:block;}
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,85vw); height:100vh; z-index:100;
    background:var(--paper); box-shadow:-14px 0 30px rgba(0,0,0,.1);
    transform:translateX(100%); transition:transform .25s ease; padding:24px 28px 28px; overflow-y:auto;
    display:flex; flex-direction:column; gap:24px;
  }
  .main-nav.open{transform:translateX(0);}
  .nav-close{
    display:flex; align-items:center; justify-content:center; align-self:flex-end;
    width:40px; height:40px; background:var(--paper-dim); border:none; border-radius:50%; cursor:pointer; margin-bottom:14px;
  }
  .nav-close svg{width:20px; height:20px; stroke:var(--ink);}
  .main-nav > ul{flex-direction:column; align-items:flex-start; gap:4px;}
  .main-nav > ul > li{width:100%;}
  .main-nav > ul > li > a{display:block; padding:13px 4px; font-size:1.02rem;}
  .nav-toggle{display:block;}
  .header-actions .cta-btn.solid{display:none;}
  .mobile-only-cta{display:inline-block; text-align:center;}
}

/* Cibles tactiles confortables (≥44px) sur mobile/tablette */
@media (max-width: 760px){
  .cta-btn, .icon-btn, .combo-trigger, .combo-list li button, .pagination a, .pagination span{
    min-height:44px;
  }
  .combo-panel{position:fixed; left:16px; right:16px; top:50%; transform:translateY(-50%); width:auto; max-height:70vh;}
  .search-bar{flex-direction:column; align-items:stretch; gap:16px;}
  .search-field{flex:none !important; width:100% !important;}
  .search-bar .cta-btn{width:100%; text-align:center;}
  .client-bar .actions{width:100%;}
  .client-bar .actions .icon-btn{flex:1; justify-content:center;}
}

/* ---------- Eyebrow / hero ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:18px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--orange); display:inline-block;}

.eyebrow-title{
  display:flex; align-items:center; gap:18px; font-size:1.15rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--orange); margin:0 0 22px;
  font-family:var(--display); justify-content:center;
}
.eyebrow-title::before, .eyebrow-title::after{content:""; flex:1; height:1px; background:var(--line);}
.page-tagline{font-family:var(--display); font-size:1.8rem; font-weight:500; color:var(--ink); margin:0 0 14px;}
.page-tagline em{font-style:italic; color:var(--orange); font-weight:500;}

.page-hero{padding:clamp(48px,8vw,80px) 0 clamp(28px,5vw,44px); position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.page-hero.center{text-align:center;}
.page-hero.no-border-bottom{border-bottom:none;}
h1.page-title{
  font-family:var(--display); font-weight:600; font-size:clamp(2.1rem,4.4vw,3.2rem);
  line-height:1.08; margin:0 0 14px; letter-spacing:-.01em;
}
h1.page-title em{font-style:italic; color:var(--muted); font-weight:500;}
.page-lead{font-size:1.05rem; color:var(--muted); max-width:60ch; margin:0;}
.page-hero.center .page-lead{margin:0 auto;}
.page-hero-row{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;}
.page-hero-row .icon-btn{flex-shrink:0;}
@media (max-width:640px){.page-hero-row{align-items:flex-start;}}

/* ---------- Bandeaux photo (héros de page) : plaque claire sur photo pleine ----------
   La photo occupe toute la largeur et garde sa pleine intensité ; seul le bloc de
   texte reçoit une plaque rose translucide qui en assure la lisibilité.
   Tout passe par la feuille de style : le HTML des pages n'est pas modifié —
   c'est le conteneur .wrap lui-même qui devient la plaque. */
body.tpl-services .page-hero,
body.tpl-communiques .page-hero{
  background-color:var(--paper-dim);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 38%;
  border-bottom:1px solid var(--line);
  padding:clamp(46px,6vw,72px) 0;
}
body.tpl-services .page-hero{ background-image:url("../images/banners/hero-services.jpg"); }
body.tpl-communiques .page-hero{ background-image:url("../images/banners/hero-communiques.jpg"); }

/* Voile minimal : il unifie la photo sans l'éteindre. */
body.tpl-services .page-hero::before,
body.tpl-communiques .page-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:rgba(20,19,18,.12);
}

/* Le conteneur .wrap devient la plaque. */
body.tpl-services .page-hero > .wrap,
body.tpl-communiques .page-hero > .wrap{
  position:relative; z-index:1;
  max-width:760px;
  background:rgba(255,250,249,.93);
  border-radius:18px;
  padding:clamp(26px,4vw,34px) clamp(24px,4vw,44px);
  box-shadow:0 18px 44px rgba(90,45,35,.18);
}

body.tpl-services .page-hero .eyebrow-title,
body.tpl-communiques .page-hero .eyebrow-title{ margin-bottom:14px; }
body.tpl-services .page-hero .page-tagline,
body.tpl-communiques .page-hero .page-tagline{ font-size:2.1rem; margin-bottom:14px; }
body.tpl-services .page-hero .page-lead,
body.tpl-communiques .page-hero .page-lead{ margin:0 auto; }

/* ---- Mobile et petites tablettes ----
   La plaque est détachée des bords de l'écran : sans cette marge latérale, elle
   viendrait se coller aux deux côtés et la photo disparaîtrait sur les flancs. */
@media (max-width:760px){
  body.tpl-services .page-hero,
  body.tpl-communiques .page-hero{ padding:34px 0; background-position:center; }
  body.tpl-services .page-hero > .wrap,
  body.tpl-communiques .page-hero > .wrap{
    margin-left:18px;
    margin-right:18px;
    border-radius:14px;
    padding:24px 22px;
  }
  body.tpl-services .page-hero .page-tagline,
  body.tpl-communiques .page-hero .page-tagline{ font-size:1.65rem; }
}
@media (max-width:400px){
  body.tpl-services .page-hero > .wrap,
  body.tpl-communiques .page-hero > .wrap{ margin-left:14px; margin-right:14px; padding:22px 18px; }
}

/* ---------- Feature rows (Services) ---------- */
.feature-row{padding:clamp(40px,7vw,72px) 0; border-bottom:1px solid var(--line);}
.feature-row:last-of-type{border-bottom:none;}
.feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.feature-grid.reverse .feature-media{order:-1;}
.feature-index{font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); margin:0 0 12px;}
.feature-row h2{font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 14px; font-weight:600;}
.feature-row p{color:var(--muted); margin:0;}
.feature-media img{border-radius:16px;}
@media (max-width:800px){
  .feature-grid, .feature-grid.reverse{grid-template-columns:1fr;}
  .feature-grid.reverse .feature-media{order:0;}
}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--ink); color:#fff; padding:clamp(48px,8vw,84px) 0; text-align:center;}
.cta-banner h2{font-family:var(--display); font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 14px; font-weight:600; color:#fff;}
.cta-banner p{max-width:56ch; margin:0 auto 28px; color:#d9d1c8;}
.cta-banner .cta-btn{border-color:#fff; color:#fff;}
.cta-banner .cta-btn:hover{background:#fff; color:var(--ink);}

/* ---------- Search & filter bar (page Communiqués) ---------- */
.search-bar{
  background:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0;
  display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end; margin-bottom:36px;
}
.search-field{flex:1 1 200px; display:flex; flex-direction:column; gap:6px;}
.search-field label{font-size:.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.1em;}
.search-field input[type="text"], .search-field input[type="search"]{
  border:none; border-bottom:1px solid var(--ink); border-radius:0; padding:8px 2px; font-family:var(--body);
  font-size:.98rem; background:none; color:var(--ink);
}
.search-field input:focus{outline:none; border-bottom:2px solid var(--orange); background:none;}
.search-bar .cta-btn{align-self:flex-end;}

/* --- Combobox déroulant avec recherche interne (Catégorie / Client) --- */
.combo{position:relative;}
.combo-trigger{
  width:100%; text-align:left; border:none; border-bottom:1px solid var(--ink); border-radius:0; padding:8px 2px;
  background:none; font-family:var(--body); font-size:.98rem; cursor:pointer; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.combo-trigger:hover{border-bottom-color:var(--orange);}
.combo-trigger .chevron{width:14px;height:14px;stroke:var(--muted); flex-shrink:0; transition:transform .15s ease;}
.combo.open .combo-trigger .chevron{transform:rotate(180deg);}
.combo-panel{
  position:absolute; top:calc(100% + 8px); left:0; width:100%; min-width:220px; background:#fff;
  border:1px solid var(--line); border-radius:4px; box-shadow:0 16px 36px rgba(43,43,43,.12);
  padding:10px; display:none; z-index:50;
}
.combo.open .combo-panel{display:block;}
.combo-search{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:.88rem;
  margin-bottom:8px; font-family:var(--body);
}
.combo-search:focus{outline:none; border-color:var(--orange);}
.combo-list{list-style:none; margin:0; padding:0; max-height:240px; overflow-y:auto;}
.combo-list li button{
  width:100%; text-align:left; background:none; border:none; padding:8px 10px; border-radius:7px;
  font-size:.9rem; cursor:pointer; color:var(--ink); font-family:var(--body);
}
.combo-list li button:hover, .combo-list li button.active{background:var(--paper-dim); color:var(--orange-deep);}
.combo-empty{font-size:.85rem; color:var(--muted); padding:8px 10px;}
.combo-clear{font-size:.78rem; color:var(--muted); background:none; border:none; cursor:pointer; padding:6px 10px; text-decoration:underline;}
.combo-clear-all{width:100%; text-align:left; font-size:.82rem; color:var(--orange-deep); background:none; border:none; cursor:pointer; padding:7px 10px; border-radius:7px; margin-bottom:4px;}
.combo-clear-all:hover{background:var(--paper-dim);}
.combo-select-all{width:100%; text-align:left; font-size:.82rem; color:var(--ink); background:none; border:1px solid var(--line); cursor:pointer; padding:7px 10px; border-radius:7px;}
.combo-select-all:hover{background:var(--paper-dim);}
.combo-checkbox-item{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:.9rem;}
.combo-checkbox-item:hover{background:var(--paper-dim);}
.combo-checkbox-item input{accent-color:var(--orange); width:16px; height:16px; flex-shrink:0;}

/* ---------- Liste des communiqués ---------- */
.results-meta{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
/* Page d'un client : le décompte est le premier élément du contenu et venait se
   coller au filet du bandeau. Sur la page des communiqués il est précédé de la
   barre de recherche, qui assure déjà l'espacement — d'où le « :first-child ». */
main > .results-meta:first-child{ margin-top:36px; }
.results-meta p{margin:0; color:var(--muted); font-size:.92rem;}
.press-grid{display:flex; flex-direction:column; gap:0; margin:0 0 40px; padding:0; list-style:none;}

.press-card{
  border-bottom:1px solid var(--line); background:none; display:flex; flex-direction:column;
}
.press-card:first-child{border-top:1px solid var(--line);}
/* Sans recherche active, le décompte des résultats est absent : la liste suit
   alors directement la barre de recherche, et sa bordure haute doublait celle,
   basse, de la barre. On la retire dans ce cas seulement — dès qu'une recherche
   est lancée, le décompte s'intercale et le trait reprend son utilité. */
#communiques-results > .press-grid:first-child > .press-card:first-child{ border-top:none; }
.press-card a.card-link{text-decoration:none; color:inherit; display:flex; flex-direction:row-reverse; align-items:center; gap:24px; padding:30px 4px;}
.press-card .thumb{width:170px; height:118px; flex-shrink:0; background:var(--paper-dim); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:0;}
.press-card .thumb img{max-width:92%; max-height:92%; width:auto; height:auto; object-fit:contain;}
.press-card .body{padding:0; display:flex; flex-direction:column; gap:0; flex:1; min-width:0;}
.press-card .cats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.press-card .cats span{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--orange);
}
.press-card h3{font-family:var(--display); font-size:1.4rem; margin:0 0 10px; line-height:1.28; font-weight:600;}
.press-card .excerpt{font-size:.98rem; color:var(--muted); margin:0 0 10px; line-height:1.55;}
.press-card .excerpt p{margin:0;}
.press-card .excerpt p + p{margin-top:4px;}
.press-card .card-footer{font-size:.85rem; color:var(--muted); font-style:italic; margin-top:2px;}
@media (max-width:900px){
  .press-card .thumb{width:140px; height:98px;}
}
@media (max-width:560px){
  /* Sur mobile, le logo du client passe au-dessus du texte : on le garde volontairement
     petit (il servait auparavant de bandeau pleine largeur, beaucoup trop imposant). */
  .press-card a.card-link{flex-direction:column; align-items:flex-start; gap:14px; padding:22px 4px;}
  /* Le logo est centré sur la largeur de la carte, le texte reste aligné à gauche. */
  .press-card .thumb{width:118px; height:82px; align-self:center;}
}

.no-results{text-align:center; padding:20px 20px 40px; color:var(--muted);}

/* ---------- Pagination ---------- */
.pagination{display:flex; justify-content:center; gap:8px; margin:40px 0 0; flex-wrap:wrap;}
.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px;
  border-radius:10px; border:1px solid var(--line); text-decoration:none; font-size:.88rem; color:var(--ink);
}
.pagination a:hover{border-color:var(--orange); color:var(--orange);}
.pagination .current{background:var(--orange); border-color:var(--orange); color:#fff;}
.pagination .pagination-ellipsis{border:none; color:var(--muted); min-width:auto; width:auto;}

/* ---------- Page communiqué (single) ---------- */
.press-header{
  background-color:var(--paper-dim);
  /* L'image du motif géométrique a été teintée directement dans le fichier, au
     rose exact de l'ancien bandeau (--paper-dim #fbeeec) : aucun voile n'est
     nécessaire, le motif se lit donc à pleine finesse. */
  background-image:url("../images/banners/hero-communique-rose.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--line); padding:52px 0 40px;
}
.press-cats{margin-bottom:14px; display:flex; gap:14px; flex-wrap:wrap;}
.press-cats a{
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--orange-deep); text-decoration:none;
}
.press-cats a:hover{text-decoration:underline;}
h1.press-title{font-family:var(--display); font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.15; font-weight:600; margin:0 0 12px; color:var(--ink);}
.press-meta{display:flex; align-items:center; gap:16px; font-size:.88rem; color:var(--muted); flex-wrap:wrap;}
.press-excerpt{font-size:1.05rem; color:var(--muted); max-width:70ch; margin:0 0 14px; line-height:1.6;}
.press-excerpt p{margin:0 0 8px;}

main.press-main{max-width:900px; margin:0 auto; padding:40px clamp(20px,5vw,32px) 90px;}

.client-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:18px;
  padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--line);
}
/* L'identité du client occupe la place restante et peut passer sur plusieurs lignes ;
   les boutons Imprimer / Partager restent ainsi calés à droite, même avec un nom
   de client très long (sans ce réglage, ils basculaient sous le nom, à gauche). */
.client-identity{display:flex; align-items:center; gap:16px; flex:1 1 auto; min-width:0;}
.client-logo-link{display:block;}
.client-logo-box{
  width:132px; height:132px; border-radius:12px; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
  transition:transform .15s ease, box-shadow .15s ease;
}
.client-logo-box img{width:100%; height:100%; object-fit:contain; padding:6px;}
.client-logo-link:hover .client-logo-box{transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.08);}
@media (max-width:560px){
  .client-logo-box{width:104px; height:104px;}
}
.client-text{font-size:.88rem; color:var(--muted); line-height:1.5; display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto;}
.client-name-link{font-weight:700; color:var(--ink); text-decoration:none; font-size:1.02rem; overflow-wrap:break-word;}
.client-name-link:hover{color:var(--orange);}
.client-datetime{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}

.actions{display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto;}
/* Sous 860 px, la barre repasse en deux lignes : le logo (132 px) et les deux boutons
   (~300 px) ne laissent plus assez de place au nom du client, qui finirait compressé. */
/* Sous 860 px, la barre passe sur deux lignes : le nom du client reste à gauche et
   les boutons, désormais seuls sur leur ligne, sont centrés.
   On neutralise aussi l'étirement pleine largeur imposé plus haut par la règle des
   cibles tactiles (qui rendait « Imprimer » démesuré) : les boutons gardent leur
   taille naturelle, seule la hauteur minimale de 44 px est conservée. */
@media (max-width:860px){
  .client-bar{flex-wrap:wrap;}
  .client-identity{flex:1 1 100%;}
  .client-bar .actions{width:100%; margin-left:0; justify-content:center;}
  .client-bar .actions .icon-btn{flex:0 0 auto;}
}
.icon-btn{
  display:flex; align-items:center; gap:7px; border:1px solid var(--ink); background:none;
  padding:9px 16px; border-radius:2px; font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; color:var(--ink);
  font-family:var(--body); transition:all .15s ease;
}
.icon-btn:hover{background:var(--ink); color:var(--paper);}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;}

.share-menu{position:relative;}
.share-dropdown{
  position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 16px 36px rgba(43,43,43,.14); padding:8px; display:none; min-width:200px; z-index:50;
}
.share-menu.open .share-dropdown{display:block;}
.share-dropdown button, .share-dropdown a{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
  padding:9px 10px; border-radius:8px; font-size:.86rem; cursor:pointer; color:var(--ink); text-decoration:none; font-family:var(--body);
}
.share-dropdown button:hover, .share-dropdown a:hover{background:var(--paper-dim);}
.share-dropdown .brand-icon{width:18px; height:18px; flex-shrink:0;}
.copy-feedback{font-size:.72rem; color:var(--success); margin-left:6px; display:none;}
.copy-feedback.show{display:inline;}

.featured-image{width:100%; aspect-ratio:16/9; border-radius:16px; margin-bottom:32px; overflow:hidden; background:var(--paper-dim);}
.featured-image img{width:100%;height:100%;object-fit:cover;}

/* Interligne et espacement entre paragraphes calés sur le rendu WordPress :
   la marge de 20 px, ajoutée à un interligne de 1.8, créait un écart de 50 px
   entre deux paragraphes — presque deux fois celui de WordPress (~26 px). */
article.press-body{font-size:1.05rem; line-height:1.7; color:var(--ink);}
article.press-body p{margin:0 0 15px;}
/* Ligne créée avec Maj + Entrée : aucun espace supplémentaire en dessous,
   les deux lignes se suivent à l'interligne normal. */
article.press-body p.rm-tight{ margin-bottom:0; }
article.press-body p br{ line-height:inherit; }
/* Un paragraphe vide sert de vraie respiration : on lui rend sa hauteur de ligne. */
article.press-body p:empty{ margin:0; height:1.7em; }
article.press-body p:first-of-type::first-letter{
  font-family:var(--display); font-size:3.6rem; float:left; line-height:.82; padding-right:8px;
  color:var(--orange); font-weight:600;
}
article.press-body hr{border:none; border-top:1px solid var(--line); margin:36px 0;}
article.press-body table{border-collapse:collapse; width:100%; margin:0 0 24px;}
article.press-body table th, article.press-body table td{border-bottom:1px solid var(--line); padding:10px 14px; text-align:center;}
article.press-body table thead th{background:var(--paper-dim); font-weight:700; color:var(--ink);}
article.press-body .two-col{display:flex; gap:24px; margin-bottom:20px;}
article.press-body .two-col .col{flex:1; min-width:0;}
article.press-body img{border-radius:8px; height:auto; max-width:100%;}
/* ==========================================================
   QUILL - Alignements du contenu des communiqués
   ========================================================== */

/* Texte */
.press-body .ql-align-left { text-align: left !important; }
.press-body .ql-align-center { text-align: center !important; }
.press-body .ql-align-right { text-align: right !important; }
.press-body .ql-align-justify { text-align: justify !important; }

/* Images
   Par défaut une image reste en ligne : si l'éditeur en contient plusieurs dans le
   même paragraphe, elles s'affichent côte à côte sur le site public, exactement
   comme dans l'éditeur. Seule une image SEULE dans son paragraphe passe en bloc,
   ce qui permet de l'aligner à gauche, au centre ou à droite. */
.press-body p img,
.press-body div img { display:inline-block; vertical-align:middle; }
.press-body p img + img,
.press-body div img + img { margin-left:12px; }

.press-body .ql-align-left img:only-child { display: block; margin-left: 0; margin-right: auto; }
.press-body .ql-align-center img:only-child { display: block; margin-left: auto; margin-right: auto; }
.press-body .ql-align-right img:only-child { display: block; margin-left: auto; margin-right: 0; }

/* Plusieurs images alignées : on conserve l'alignement du paragraphe et le flux en ligne. */
.press-body .ql-align-center img { margin-left:auto; margin-right:auto; }

/* Images à l'intérieur des tableaux */
article.press-body table img { max-width:100%; height:auto; margin:4px auto; display:block; }
article.press-body table td, article.press-body table th { vertical-align:middle; }

/* Vidéos et iframes */
.press-body .ql-align-left iframe, .press-body .ql-align-left video { display: block; margin-left: 0; margin-right: auto; }
.press-body .ql-align-center iframe, .press-body .ql-align-center video { display: block; margin-left: auto; margin-right: auto; }
.press-body .ql-align-right iframe, .press-body .ql-align-right video { display: block; margin-left: auto; margin-right: 0; }

.back-cta{margin-top:56px; padding:40px; border-radius:18px; text-align:center; background:linear-gradient(120deg, var(--orange) 0%, var(--orange-deep) 100%); color:#fff;}
.back-cta h3{margin:0 0 8px; font-family:var(--display); font-size:1.3rem;}
.back-cta p{margin:0 0 20px; opacity:.9; font-size:.92rem;}
.back-cta .cta-btn{background:#fff; color:var(--orange-deep); border-color:#fff;}

/* ---------- Formulaires (Abonnez-vous / Nous joindre) ---------- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(24px,4vw,44px); box-shadow:0 16px 36px rgba(43,43,43,.05);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid.single{grid-template-columns:1fr;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.field label{font-size:.85rem; font-weight:600; color:var(--ink);}
.field .required{color:var(--orange);}
.field input, .field textarea{
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family:var(--body);
  font-size:.95rem; background:var(--paper); color:var(--ink); resize:vertical;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--orange); background:#fff;}
.field.error input, .field.error textarea{border-color:#c0392b;}
.field .error-msg{font-size:.78rem; color:#c0392b;}
.form-submit{display:flex; align-items:center; gap:14px; margin-top:6px;}
.form-note{font-size:.82rem; color:var(--muted);}
.form-alert{border-radius:12px; padding:16px 18px; font-size:.92rem; margin-bottom:24px;}
.form-alert.success{background:#e9f6ee; color:var(--success); border:1px solid #bfe6cc;}
.form-alert.error{background:#fdecea; color:#c0392b; border:1px solid #f3c1bc;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}

/* Page « Nous joindre » : la grille à deux colonnes est définie en style en ligne
   dans nous-joindre.php (fichier maintenu par l'équipe de développement, non
   modifié ici). Sur mobile elle ne se repliait pas et le formulaire débordait
   hors de l'écran — d'où ce passage à une seule colonne, avec !important pour
   primer sur le style en ligne. */
@media (max-width:820px){
  main.wrap > div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  /* Le bloc téléphone / courriel est centré EN TANT QUE GROUPE : chaque ligne
     garde la disposition de la version ordinateur (icône à gauche, texte à
     droite), c'est l'ensemble qui se centre dans la colonne. */
  .contact-info{ align-items:center; }
  .contact-info .item{ text-align:left; }
}
.contact-info{display:flex; flex-direction:column; gap:18px; font-size:.95rem;}
.contact-info .item{display:flex; gap:14px; align-items:flex-start;}
.contact-info .icon{
  width:40px;height:40px;border-radius:10px;background:var(--paper-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-info svg{width:18px;height:18px;stroke:var(--orange-deep);}

/* ---------- Footer ---------- */
footer.site{background:var(--paper-dim); color:var(--muted); padding:56px 0 24px; margin-top:0; border-top:1px solid var(--line);}
footer.site h3{color:var(--ink); font-size:.9rem; font-weight:700; margin:0 0 14px; text-transform:uppercase; letter-spacing:.05em;}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
footer.site a{color:var(--muted); text-decoration:none; font-size:.9rem;}
footer.site a:hover{color:var(--orange-deep);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid var(--line);}
.footer-grid p{font-size:.88rem; color:var(--muted); margin:14px 0 0;}
footer .logo img{height:56px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:22px; font-size:.82rem;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Bannière de cookies ---------- */
#cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; max-width:560px; background:#fff;
  border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 50px rgba(0,0,0,.18);
  padding:22px 24px; z-index:1000; display:none; font-size:.88rem; color:var(--ink);
}
#cookie-banner.show{display:block;}
#cookie-banner h2{font-family:var(--display); font-size:1.1rem; margin:0 0 10px; font-weight:600;}
#cookie-banner p{margin:0 0 16px; color:var(--muted); line-height:1.55;}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap;}

#cookie-modal-overlay{
  position:fixed; inset:0; background:rgba(43,43,43,.45); z-index:1100; display:none; align-items:center; justify-content:center; padding:20px;
}
#cookie-modal-overlay.show{display:flex;}
#cookie-modal{background:#fff; border-radius:18px; max-width:640px; width:100%; max-height:85vh; overflow-y:auto; padding:clamp(22px,4vw,36px);}
#cookie-modal h2{font-family:var(--display); font-size:1.3rem; margin:0 0 14px; font-weight:600;}
#cookie-modal > p{color:var(--muted); font-size:.9rem; line-height:1.6; margin-bottom:22px;}
.cookie-category{border-top:1px solid var(--line); padding:18px 0;}
.cookie-category:first-of-type{border-top:none;}
.cookie-cat-head{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:8px;}
.cookie-cat-head strong{font-size:.98rem;}
.cookie-cat-head p{margin:2px 0 0; font-size:.85rem; color:var(--muted); line-height:1.55;}
.always-active{font-size:.76rem; font-weight:700; color:var(--success); text-transform:uppercase; letter-spacing:.03em;}

.switch{position:relative; width:44px; height:24px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.switch .track{position:absolute; inset:0; background:#d8d3c9; border-radius:999px; cursor:pointer; transition:background .15s ease;}
.switch .track::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s ease; box-shadow:0 1px 3px rgba(0,0,0,.25);}
.switch input:checked + .track{background:var(--orange);}
.switch input:checked + .track::before{transform:translateX(20px);}
.switch input:disabled + .track{opacity:.6; cursor:not-allowed;}

.cookie-modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:8px; flex-wrap:wrap;}

@media (max-width:600px){
  #cookie-banner{left:12px;right:12px;bottom:12px;padding:18px;}
  .cookie-actions{flex-direction:column;}
  .cookie-actions .cta-btn{width:100%; text-align:center;}
}

/* Bouton retour en haut / impression : masquer éléments non pertinents à l'impression */
@media print{
  header.main, .topbar, .actions, .back-cta, footer.site, #cookie-banner, #cookie-modal-overlay{display:none !important;}
  .press-header{background:none !important; background-image:none !important; color:#000 !important; padding:0 0 20px;}
  .press-header a, .press-cats a{color:#000 !important;}
  main.press-main{padding:0;}
  body{background:#fff;}

  /* Marge en tête de page : sans elle, le cadre du logo du client venait se
     coller au filet supérieur de la feuille imprimée. */
  @page{ margin:16mm 14mm; }
  .client-bar{ margin-top:14px; padding-top:6px; }
  .client-logo-box{ border-color:#ccc !important; }
  /* On évite qu'une image et sa légende soient séparées par un saut de page. */
  article.press-body figure.rm-figure{ break-inside:avoid; page-break-inside:avoid; }
}

/* ---------- Légendes d'images ----------
   Une image dont l'éditeur a renseigné la légende est encapsulée dans une
   <figure> à l'affichage (voir render_release_body()). */
/* Par défaut une figure suit l'alignement normal du texte, c'est-à-dire à gauche.
   Elle n'est centrée que si le paragraphe d'origine l'était. */
article.press-body figure.rm-figure{ margin:0 0 22px; }
article.press-body figure.rm-figure img{ display:block; margin:0; }
/* La légende est toujours centrée SOUS SON IMAGE : la figure épouse la largeur
   de l'image (width:max-content) et la légende y est centrée. C'est l'alignement
   de la figure elle-même qui la place à gauche, au centre ou à droite. */
article.press-body figure.rm-figure{ width:max-content; max-width:100%; }
article.press-body figure.rm-figure figcaption{
  margin-top:8px; font-size:.85rem; line-height:1.45; color:var(--muted);
  font-style:italic; text-align:center;
}
article.press-body figure.rm-figure.ql-align-center{ margin-left:auto; margin-right:auto; }
article.press-body figure.rm-figure.ql-align-right{ margin-left:auto; margin-right:0; }
article.press-body table figure.rm-figure{ margin:0; }
article.press-body table figure.rm-figure figcaption{ font-size:.78rem; margin-top:5px; }
@media print{
  article.press-body figure.rm-figure figcaption{ color:#000 !important; }
}

/* Rangée d'images légendées : préserve la disposition côte à côte de l'éditeur. */
article.press-body .rm-figure-row{
  /* Pas de retour à la ligne : les images côte à côte dans l'éditeur le restent
     sur le site. Si elles sont trop larges, elles rétrécissent proportionnellement
     au lieu de s'empiler. */
  /* align-items:center — les images de hauteurs différentes sont alignées sur
     leur milieu plutôt que sur leur bord supérieur. */
  display:flex; flex-wrap:nowrap; gap:18px; align-items:center;
  justify-content:flex-start; margin:0 0 22px;
}
article.press-body .rm-figure-row.ql-align-center{ justify-content:center; }
article.press-body .rm-figure-row.ql-align-right{ justify-content:flex-end; }
/* Les figures gardent leur taille naturelle mais peuvent RÉTRÉCIR pour tenir sur
   une seule ligne (flex-shrink). Avec « flex:1 1 0 » elles s'étiraient à parts
   égales et l'image se retrouvait centrée dans sa moitié, ce qui donnait
   l'impression d'un centrage jamais demandé. */
article.press-body .rm-figure-row .rm-figure-inline{
  margin:0; flex:0 1 auto; min-width:0; max-width:100%;
}
article.press-body .rm-figure-row img{ display:block; margin:0; max-width:100%; height:auto; }
/* Dans une rangée, chaque figure fait la largeur de son image : la légende y est
   donc centrée sous l'image concernée, quelle que soit l'orientation du groupe. */
article.press-body .rm-figure-row .rm-figure-inline figcaption{ text-align:center; }
/* Hauteur minimale identique pour toutes les légendes d'une rangée : sans elle,
   une légende sur deux lignes décalerait le milieu de son image. */
article.press-body .rm-figure-row .rm-figure-inline figcaption{ min-height:1.45em; }
/* En dessous de 560 px, deux images côte à côte deviennent illisibles : on empile. */
@media (max-width:560px){
  article.press-body .rm-figure-row{ flex-direction:column; align-items:flex-start; }
  /* width:max-content ferait déborder une image plus large que l'écran, et la
     légende ne serait alors plus centrée sur elle. On repasse en largeur fluide. */
  /* On conserve width:max-content (plafonné à 100%) pour que la figure épouse la
     largeur de l'image : c'est ce qui garde la légende centrée dessus. Passer en
     largeur automatique étirait la figure sur toute la ligne et décalait la
     légende vers la droite. */
  article.press-body .rm-figure-row .rm-figure-inline{ flex:0 0 auto; width:max-content; max-width:100%; }
  article.press-body figure.rm-figure img{ max-width:100%; height:auto; }
}


/* ---------- Surlignage des mots recherchés ---------- */
.press-card mark,
.press-body mark{
  background:#fff29a;
  color:inherit;
  padding:0 2px;
  border-radius:2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
@media print{
  .press-card mark, .press-body mark{ background:none; font-weight:700; }
}

/* ---------- Aide à la recherche : bulle au survol de l'icône « ? » ---------- */
.search-help{ position:relative; display:inline-flex; vertical-align:middle; margin-left:6px; cursor:help; }
.search-help-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  border:1px solid var(--orange-deep); color:var(--orange-deep);
  font-size:.68rem; font-weight:700; line-height:1;
}
.search-help:hover .search-help-icon,
.search-help:focus .search-help-icon{ background:var(--orange-deep); color:#fff; }

.search-help-popup{
  position:absolute; left:0; top:calc(100% + 10px); z-index:400;
  width:min(360px, calc(100vw - 40px));
  display:block; opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 34px rgba(60,40,35,.16);
  padding:14px 16px; text-align:left;
  font-size:.82rem; font-weight:400; line-height:1.55; color:var(--muted);
  text-transform:none; letter-spacing:normal;
}
.search-help:hover .search-help-popup,
.search-help:focus .search-help-popup,
.search-help:focus-within .search-help-popup{ opacity:1; visibility:visible; transform:translateY(0); }
/* Petite flèche vers l'icône. */
.search-help-popup::before{
  content:""; position:absolute; left:14px; top:-6px; width:10px; height:10px;
  background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.search-help-popup strong{ display:block; color:var(--ink); font-size:.9rem; margin-bottom:6px; }
/* Le second intertitre est séparé du bloc précédent par un filet. */
.search-help-popup .search-help-second{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
}
.search-help-popup p{ margin:0 0 10px; }
.search-help-popup table{ border-collapse:collapse; margin:0 0 10px; }
.search-help-popup td{ padding:2px 12px 2px 0; vertical-align:top; }
.search-help-popup code{
  background:var(--paper-dim); border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:.85em; color:var(--ink); white-space:nowrap;
}
.search-help-example{ display:block; padding-top:9px; border-top:1px solid var(--line); }
.search-help-example code{ white-space:normal; }
.search-help-note{ display:block; margin-top:8px; font-size:.76rem; opacity:.85; }

@media (max-width:640px){
  /* Sur mobile, la bulle n'est plus ancrée à l'icône mais au champ de recherche
     lui-même : l'icône se trouve à quelques dizaines de pixels du bord, et une
     bulle calée dessus sortait forcément de l'écran d'un côté ou de l'autre. */
  .search-help{ position:static; }
  .search-bar .search-field{ position:relative; }
  .search-help-popup{
    left:0; right:auto; top:calc(100% + 8px);
    width:min(340px, calc(100vw - 44px));
  }
  .search-help-popup::before{ display:none; }
}