/* =============================  
   FONTS — utilisées par <body>
============================= */
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-RegularItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Unageo';
  src: url('/fonts/Unageo-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

/* =============================
   THEME GLOBAL (hérité de l’ancien styles.css)
============================= */
:root {
  --color-principal: #14676A;
  --color-principal-hover: #1b7d81;
  --color-secondaire: #235b63;
  --color-fond-clair: #f8f8f8;
  --color-texte: #123235;
  --color-danger: #dc2626;
  --color-white: #ffffff;
  --color-grey: #8fa4a9;
}

/* =============================
   RESET & BASE utilisés par index.php
============================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Unageo', sans-serif;
  background-color: var(--color-fond-clair);
  color: var(--color-texte);
  line-height: 1.6;
  padding-top: 0;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  color: var(--color-principal);
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
}

:root{
  --shell-bg: rgba(255,255,255,0.75);
  --shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* =============================
   STYLES SPECIFIQUES A index.php
   (ex-bloc <style> inline)
============================= */
:root{ --naotc-green:#065653; --corner:28px; --frame-h:56px; --gap:calc(var(--frame-h)*0.05);
       --elev:0 12px 30px rgba(0,0,0,.25); --icon-size:1.6rem; --between-bg:#FAF7F0;
       --align-offset:30px; --quick-width:80%; }
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes zoomInSoft{from{transform:scale(1.02)}to{transform:1}}
@keyframes slideUp{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes popIn{0%{transform:translateY(10px);opacity:0}100%{transform:none;opacity:1}}
html,body{overflow-x:hidden;margin:0;background:#fff}

.hero{position:relative;width:100%;overflow:hidden}
.hero img{width:100%;height:auto;display:block;transform-origin:center;animation:zoomInSoft .8s ease-out both}

.between-photos{background:var(--between-bg);padding:40px 0 48px;position:relative;z-index:1}
.between-photos-yellow{background:#FFEFAA;padding:40px 0 48px;position:relative;z-index:1}
.between-photos-blue{background:#B1DFFF;padding:40px 0 48px;position:relative;z-index:1}
.between-photos-orange{background:#FFD3AC;padding:40px 0 48px;position:relative;z-index:1}
.between-photos-green{background:#BAE3BB;padding:40px 0 48px;position:relative;z-index:1}

.title-container{width:var(--quick-width);margin:14px auto 12px}
.title{margin:14px 0 12px var(--align-offset);color:var(--naotc-green);font-weight:700;font-style:italic;font-size:2rem;letter-spacing:.2px}

/* Recherche rapide */
.quick-shell{width:var(--quick-width);margin:-78px auto 24px;background:var(--naotc-green);border-radius:var(--corner);padding:26px 20px;box-shadow:var(--elev);position:relative;z-index:2;color:#fff;animation:slideUp .5s ease-out .1s both}
.quick-title{color:#fff;font-weight:700;font-style:italic;font-size:2rem;margin:0 0 12px 4px;letter-spacing:.2px}
.search-frame{height:var(--frame-h);display:flex;align-items:center;border:2px solid rgba(255,255,255,.95);border-radius:var(--corner);background:transparent;padding:var(--gap) var(--gap) var(--gap) 12px;transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease}
.search-frame:hover{border-color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.search-frame:focus-within{border-color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.30);transform:translateY(-1px)}
.search-input{flex:1;border:none;outline:none;background:transparent;color:#fff;font-size:1.05rem;padding:0 10px 0 2px;height:100%}
.search-input::placeholder{color:rgba(255,255,255,.92)}
.search-btn{height:100%;min-width:72px;border:none;border-radius:var(--corner);background:#fff;color:#naotc-green;display:grid;place-items:center;cursor:pointer;line-height:0;box-shadow:0 2px 0 rgba(0,0,0,.08) inset;transition:background .2s ease, transform .14s ease, box-shadow .2s ease, filter .2s ease}
.search-btn:hover{background:#f2f2f2;filter:brightness(1.02)} .search-btn:active{transform:scale(.98);box-shadow:none}
.search-btn .icon-chevron{width:var(--icon-size);height:var(--icon-size);display:block}
#search-results{margin-top:18px} #search-results .card{border-radius:10px;transition:transform .16s ease, box-shadow .16s ease;animation:popIn .25s ease-out both}
#search-results .card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.18)} #search-results .card-title{font-size:1.05rem}

/* Les réseaux */
.networks-wrap{width:80%;margin:0 auto}
.social-wrap{width:80%;margin:0 auto}
.filters-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px var(--align-offset) 18px;justify-content:space-between}
.region-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#065653;color:#fff;border:none;border-radius:18px;padding:12px 18px;min-width:230px;font-size:1.2rem;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white'><path d='M5 7l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.region-select:hover{filter:brightness(1.04)} .region-select:focus{outline:3px solid rgba(6,86,83,.25)}
.dept-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:1}
.pill{width:56px;height:56px;border-radius:12px;font-size:24px;font-weight:700;border:none;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.08);transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease}
.pill--active{background:#065653;color:#fff} .pill--inactive{background:#fff;color:#065653}
.pill:hover{transform:scale(1.05);box-shadow:0 10px 22px rgba(0,0,0,.15)}
.cat{margin:14px var(--align-offset) 12px;border-radius:18px;overflow:hidden;background:transparent}
.cat-header{background:#065653;color:#fff;padding:14px 18px;border-radius:18px;font-size:1.25rem;cursor:pointer;transition:filter .2s ease, transform .15s ease}
.cat-header:hover{filter:brightness(1.03);transform:translateY(-1px)}
.cat-body{overflow:hidden;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease, padding .25s ease;display:grid;grid-template-rows:0fr;opacity:0;padding:0 10px}
.cat-body.open{grid-template-rows:1fr;opacity:1;padding:12px 12px 2px}
.cat-body>div{min-height:0}
.list-two-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 40px;padding:6px 6px 12px}
.list-two-cols a{font-size:1.05rem;font-weight:normal;color:#065653;text-decoration:none;transition:transform .2s ease, color .2s ease;display:inline-block}
.list-two-cols a:hover{transform:scale(1.05);color:#1b7d81}

/* === Les articles : styles custom === */
.articles-shell{width:var(--quick-width);margin:-78px auto 24px;background:var(--naotc-green);border-radius:var(--corner);padding:26px 20px;box-shadow:var(--elev);position:relative;z-index:2;color:#fff;animation:slideUp .5s ease-out .1s both}
.articles-sub{margin:0 0 12px 4px;font-size:16px;color:#000}
.slider-row{display:grid;grid-template-columns:180px 1fr 180px;gap:22px;align-items:center}
.thumb{width:100%;aspect-ratio:16/10;border-radius:22px;object-fit:cover;opacity:.95;box-shadow:0 10px 24px rgba(0,0,0,.12);transition:transform .3s ease, opacity .3s ease}
.thumb--right{justify-self:end}
.thumb:hover{transform:translateY(-2px)}
.main-img-wrap{position:relative}
.main-img{width:85%;margin:0 auto;display:block;aspect-ratio:16/10;border-radius:26px;object-fit:cover;box-shadow:0 16px 36px rgba(0,0,0,.18);opacity:1;transform:translateY(0) scale(1);transition:opacity .45s ease, transform .45s ease, filter .45s ease;will-change: transform, opacity;}
.main-img.is-fading-out{opacity:0;transform:translateY(6px) scale(.98);filter:saturate(.9)}
.main-img.is-fading-in{opacity:1;transform:translateY(0) scale(1);filter:saturate(1)}
.main-img.dir-left.is-fading-out{transform:translateX(-14px) scale(.985);opacity:0.15}
.main-img.dir-right.is-fading-out{transform:translateX(14px) scale(.985);opacity:0.15}
.slider-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0}
.ctl{background:transparent;border:none;font-size:20px;line-height:1;cursor:pointer}
.dots{display:flex;align-items:center;gap:15px}
.dot{width:14px;height:14px;border-radius:999px;background:#fff;border:2px solid #000;padding:0;display:inline-block;cursor:pointer;transition:all .25s ease;}
.dot.active{width:36px;height:14px;border-radius:999px;background:#000;border:2px solid #000;}
.articles-title{font-weight:700;font-size:20px;margin:14px 0 6px;color:#000}
.articles-desc{font-size:16px;color:#000;margin:0 0 6px}
.articles-meta{font-size:.95rem;color:#333;margin:6px 0}
.articles-link-block{text-decoration:none;color:inherit;display:inline-block;}
.articles-link-block:hover .articles-title{ text-decoration:none; }
.articles-link-block:hover .articles-desc{ text-decoration:none; }
.articles-watermark{position:absolute;right:-13px;bottom:14px;width:120px;pointer-events:none;display:none;}
@media (min-width:1000px){.articles-watermark{display:block}}
@media (max-width:992px){ .slider-row{grid-template-columns:1fr;gap:12px} .thumb{display:none} }
@media (max-width:768px){
  :root{--frame-h:50px}
  .quick-shell{width:92%;margin:-48px auto 18px;padding:20px 14px}
  .articles-shell{width:92%;margin:-48px auto 18px;padding:20px 14px}
  .quick-title{font-size:1.6rem}
  .search-btn{min-width:64px}
  .networks-wrap{width:92%}
  .social-wrap{width:92%}
  .list-two-cols{grid-template-columns:1fr;gap:8px 12px}
  .filters-row{flex-direction:column;align-items:stretch;gap:10px;justify-content:flex-start}
  .region-select{width:100%;min-width:0;font-size:1.05rem;padding:10px 16px}
  .dept-pills{width:100%;gap:6px}
  .pill{width:44px;height:44px;font-size:18px;border-radius:10px}
}

/* Gestion libellés desktop vs mobile */
.news-nav-btn .label-mobile{ display:none; }     /* desktop par défaut */
.news-nav-btn .label-desktop{ display:inline; }

/* Mobile : ne garder que « Actu suivante » (sans flèche) + compteur */
@media (max-width:768px){
  #newsPrev{ display:none; }                     /* masquer le précédent */
  .news-nav-btn .label-desktop{ display:none; }  /* masquer versions avec chevrons */
  .news-nav-btn .label-mobile{ display:inline; } /* afficher libellé mobile */
  .news-controls{ position:static; padding-left:var(--align-offset); }
}

/* === Carrousel PHOTOS (plein largeur, 5 carrés / 3 <1000px / 1 <650px) === */
.photo-strip{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:0 auto 8px; flex-wrap:nowrap; width:100%;
}
.photo-square{
  background:#B1DFFF; border-radius:48px; /* ++ border radius */
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 36px rgba(0,0,0,.12);
  overflow:hidden; flex:0 0 auto;
  transition:transform .25s ease, opacity .25s ease;
}
.photo-square--center{width:200px;height:200px;}
.photo-square--side{width:130px;height:130px;opacity:.95;}
.photo-logo{ max-width:70%; max-height:70%; object-fit:contain; }
.photo-fallback{ font-weight:700; font-size:1.05rem; color:#00468C; text-align:center; padding:10px; }

/* Texte sous le carrousel (section bleue) */
.photos-title{ font-weight:700; font-size:20px; margin:14px 0 6px; color:#ffffff; }
.photos-meta{ font-size:.95rem; color:#ffffff; margin:6px 0; opacity:.95; }

/* Contrôles du slider PHOTOS */
#photoControls{ display:flex; align-items:center; justify-content:center; gap:14px; }
#photoControls .ctl{ color:#ffffff; }
#photoControls .ctl:disabled{ opacity:.6; }
#photoControls .photo-dots{ display:flex; align-items:center; gap:15px; }
#photoControls .photo-dot{
  width:14px; height:14px; border-radius:999px; padding:0; cursor:pointer; border:2px solid #ffffff;
  background:#00468C; transition:all .2s ease; display:inline-block;
}
#photoControls .photo-dot.active{
  width:36px; height:14px; background:#ffffff; border:2px solid #ffffff; /* pilule blanche */
}

/* Responsive: sous 1000px, n'afficher que 3 carrés (masquer extrêmes) */
@media (max-width:1000px){
  #photoSlot0, #photoSlot4{ display:none; }
  .photo-strip{ gap:14px; }
}
/* Sous 650px, n'afficher qu'un seul carré (le centre) */
@media (max-width:650px){
  #photoSlot1, #photoSlot3{ display:none; }
  .photo-strip{ justify-content:center; gap:12px; }
  .photo-square--center{width:170px;height:170px;}
  .photo-square--side{display:none;}
}
@media (max-width:560px){
  .photo-square--center{width:150px;height:150px;}
}

/* CTA buttons (pilules) */
.btn-pill-outline {
  display: inline-block;
  padding: 0.75rem 3rem;
  border: 2px solid #0A457D;   /* contour */
  border-radius: 999px;        /* forme pilule (augmenté) */
  color: #0A457D;              /* texte */
  font-style: italic;
  font-weight: 500;
  font-size:1.2rem;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
  white-space: nowrap;
}

.btn-pill-outline:hover {
  background-color: #9FCCFF;   /* léger assombrissement au hover */
  color: #0A457D;
  transform: translateY(-1px);
}

/* CTA buttons (pilules) */
.btn-pill-outline2 {
  display: inline-block;
  padding: 0.75rem 3rem;
  border: 2px solid #000000;   /* contour */
  border-radius: 999px;        /* forme pilule (augmenté) */
  color: #000000;              /* texte */
  font-style: italic;
  font-weight: 500;
  font-size:1.2rem;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
  white-space: nowrap;
}

.btn-pill-outline2:hover {
  background-color: #D1FFD1;   /* léger assombrissement au hover */
  color: #000000;
  transform: translateY(-1px);
}

/* CTA buttons (pilules) */
.btn-pill-outline3 {
  display: inline-block;
  padding: 0.75rem 3rem;
  border: 2px solid #000000;   /* contour */
  border-radius: 999px;        /* forme pilule (augmenté) */
  color: #000000;              /* texte */
  font-style: italic;
  font-weight: 500;
  font-size:1.2rem;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
  white-space: nowrap;
}

.btn-pill-outline3:hover {
  background-color: #ffba7d;   /* léger assombrissement au hover */
  color: #000000;
  transform: translateY(-1px);
}

/* ===== Actus du site ===== */
.news-shell{
  background:#9C2741; color:#fff;
  position:relative; z-index:3;        /* passe au-dessus de la photo suivante */
  margin-bottom:-75px;                 /* chevauche légèrement la photo d'après (photo5) */
  overflow:visible;                    /* laisse dépasser le watermark */
  min-height:350px;
  position: relative;
}

.news-card{
  margin:16px auto 18px;
  background:#fff; color:#000;
  border-radius:18px;
  padding:24px 22px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  min-height:84px;                     /* confort visuel */
}

/* pied : titre à gauche + nav à droite (au niveau du watermark à droite) */
.news-title{ font-weight:700; color:#fff; }

/* progression 1/3 */
.news-progress{
  text-align:center; color:#fff; opacity:.9; margin:4px 0 2px; font-weight:600;
}

/* watermark (hérite déjà de .articles-watermark) */
.news-watermark{ right:-10px; bottom:8px; width:120px; }

/* Responsive */
@media (max-width:768px){
  .news-card{ width:90%; padding:18px 16px; }
}

/* --- Titre DANS la carte blanche --- */
.news-card-title{
  margin: 0 0 10px 0;
  color: #9C2741;
  font-size: 1.5rem;       /* plus gros */
  font-weight: 700;
  line-height: 1.25;
}

/* (facultatif) corps du texte de l'actu */
.news-card-body{
  font-size: 1rem;
}

/* --- Pied : flèches à droite + progression juste dessous --- */
.news-footer{
  margin: 6px auto;
  padding-right: var(--align-offset);
  min-height: 0;  
}

/* Colonne à droite contenant les flèches + statut */
.news-controls{
  position: absolute;
  bottom: 12px;                 /* pile en bas */
  display: flex;
  flex-direction: column;       /* flèches puis compteur en dessous */
  align-items: flex-start;      /* à gauche */
  gap: 6px;
}

/* Ligne des flèches */
.news-nav{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Boutons plus gros + animation de couleur douce au hover */
.news-nav-btn{
  border: none;
  border-radius: 18px;          /* forme inchangée */
  background: #ffffff;
  color: #9C2741;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 12px 22px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color .30s ease,
    color .30s ease,
    box-shadow .25s ease,
    transform .15s ease;
}
.news-nav-btn:hover{
  background: #FFD6DF;          /* teinte douce */
  color: #6D1228;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* Compteur juste sous les flèches, aligné à gauche */
.news-progress{
  margin-top: 4px;
  text-align: left;
  color: #ffffff;
  font-weight: 600;
  opacity: .95;
}

/* Fallback mobile : on repasse en flux normal pour éviter le chevauchement */
@media (max-width: 768px){
  .news-controls{
    position: static;
    padding-left: 0;
  }
  .news-footer{
    padding-left: var(--align-offset);
  }
}

/* ===== Exploitants (bande jaune) ===== */
.ops-lead{
  margin: 4px 0 18px var(--align-offset);
  color:#000; font-style:italic; opacity:.85;
}

.ops-chips{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* occupe toute la largeur */
  gap: 22px;
  padding: 6px var(--align-offset) 0;
}

.op-chip{
  background:#FFD245; color:#fff;
  width: 100%;                  /* prend toute la largeur de sa colonne */
  aspect-ratio: 1 / 1;          /* carré */
  max-height: 100px;            /* hauteur max 200 px */
  border: 0; border-radius: 28px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  cursor:pointer; padding:0;
}
.op-chip:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.16); }
.op-chip.active{ background:#F7C22F; }   /* jaune + foncé au clic */

.op-chip img{ max-width:70%; max-height:70%; object-fit:contain; }
.op-chip-fallback{ font-weight:700; font-size:1rem; text-align:center; padding:10px; color:#fff; }
.op-chip--other{ font-weight:800; font-size:3rem; }

/* Bloc d’infos sélection */
.ops-info{ padding: 14px var(--align-offset) 0; }
.ops-title{ margin: 14px 0 8px; font-weight:700; color:#000; }
.ops-desc{ margin:0 0 8px; color:#000; }
.ops-source{ margin:0 0 8px; color:#000; font-style:italic; }
.ops-link{ color:inherit; text-decoration:none; } /* lien cliquable sans aspect hypertexte */

@media (max-width:1200px){
  .op-chip--other{ font-weight:800; font-size:2.2rem; }
}

@media (max-width:768px){
  .ops-chips{ grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .op-chip--other{ font-weight:800; font-size:1.5rem; }
}

.stats-shell{
  background:#065653; color:#ffffff;
  position:relative; z-index:3;
  margin-top:40px;                 /* +50px au-dessus */
  margin-bottom:-60px;               /* chevauche légèrement la photo6 */
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));  /* 4 items sur desktop */
  gap:22px 32px;
  align-items:center;
}
.stat-item{
  display:flex; align-items:center; gap:14px;
  background:transparent;            /* pas de carte, look “plat” comme sur l’aperçu */
  border-radius:16px; padding:6px 4px;
}
.stat-icon{ font-size:2rem; line-height:1; color:#ffffff; opacity:.95; }
.stat-value{ font-weight:800; font-size:2rem; line-height:1; color:#ffffff; }
.stat-label{ font-size:1rem; margin-top:4px; line-height:1.1; color:#ffffff; opacity:.9; }

@media (max-width:1200px){ .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:576px){ .stats-grid{ grid-template-columns: 1fr; } }

/* Wrapper pour coller le footer sans marge haut/bas et fond crème */
.footer-wrap-cream{
  background:#FAF7F0;
  margin:0;
  padding:0;
}

/* Si le footer interne a des marges, on les neutralise */
.footer-wrap-cream > footer{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* --- Social cards (en haut du footer) --- */
.social-cards-container{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 12px 0 6px;
}
.social-card-custom{
  background: #065653;                    /* case blanche demandée */
  border-radius: 18px;
  padding: 10px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 96px;                       /* compact pour tenir dans 300px total */
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.social-card-custom:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  filter: brightness(1.02);
}

@media (max-width: 768px){
  .social-cards-container{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* === FIX débordement modale photo (mobile + desktop) === */
body.modal-open{
  /* empêche l’élargissement de page quand la modale s’ouvre */
  --bs-body-padding: 0 !important;
  padding-right: 0 !important;
}

