.elementor-63 .elementor-element.elementor-element-803b403{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-63 .elementor-element.elementor-element-31c6789{padding:100px 100px 100px 100px;}body.elementor-page-63:not(.elementor-motion-effects-element-type-background), body.elementor-page-63 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}/* Start custom CSS for shortcode, class: .elementor-element-13b17f9 *//* =====================================================
   CSS — SECTION HERO (Erre Commune)
   Intègre : Colorimétrie (data-palette) & Typographie,
   fonds image / diaporama / vidéo, météo automatique
   (aucun CSS dédié requis pour la météo, juste le PHP),
   et le responsive associé à chaque ajout.
   Suppose 00-base.css + erre-couleur-css + erre-typo-css déjà chargés.
===================================================== */

/* ---- Palette de section : valeurs par défaut si aucune palette choisie ---- */
.hero {
  --h1: #ffffff;
  --accent-h1: #ffb87a;
  --text: #ffffff;
}

.hero {
  position: relative; overflow: hidden;
  min-height: 84vh;
  display: flex; align-items: center;
  background: var(--noir-doux);
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
/* Overlay sombre fixe — calibré pour la lisibilité du texte sur une photo,
   indépendant de la palette choisie (ne varie pas avec --bg).
   z-index explicite : reste AU-DESSUS des photos/vidéo (voir plus bas),
   EN-DESSOUS du texte (.hero-content, z-index:2). */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.68) 45%,
    rgba(0, 0, 0, 0.25) 75%,
    rgba(0, 0, 0, 0.10) 100%
  );
}
.hero-credit {
  position: absolute; bottom: 14px; right: 18px;
  font-size: 10px; color: rgba(255,255,255,0.45); font-weight: 600;
  z-index: 3; letter-spacing: 0.3px;
}
.hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 60px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* ---- Eyebrow (étiquette) : habillage visuel uniquement, la police/taille/
   espacement viennent du rôle "Eyebrow" de erre_typo_css.php ---- */
.hero-tag {
  background: rgba(255,255,255,0.15); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 6px 16px;
  color: var(--text); opacity: .92;
  animation: fadeDown .6s ease;
}
.hero-tag svg { width: 14px; height: 14px; stroke: rgba(255,255,255,0.85); fill: none; }

/* ---- H1 : couleur pilotée par la palette, police/taille/letter-spacing/
   marge viennent désormais du rôle "H1" de erre_typo_css.php ---- */
.hero-title {
  color: var(--h1);
  line-height: 1.0;
  animation: fadeUp .7s ease .1s both;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.hero-title .accent-h1 { color: var(--accent-h1); display: block; }

.hero-desc { color: var(--text); opacity: .85; margin-top: 18px; margin-bottom: 34px; max-width: 420px; line-height: 1.6; animation: fadeUp .7s ease .2s both; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp .7s ease .3s both; }

/* Alignement icône/texte à l'intérieur des boutons du Hero — le picto
   et le libellé n'étaient pas verticalement centrés et se touchaient
   faute de gap. Scopé à .hero-btns pour ne pas toucher .btn ailleurs
   sur le site tant que ce n'est pas vérifié là-bas aussi. */
.hero-btns .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-btns .btn svg {
  flex-shrink: 0;
}

.hero-right { display: flex; flex-direction: column; gap: 14px; animation: fadeIn .8s ease .4s both; }
.meteo-card { background: rgba(255,255,255,0.82); backdrop-filter: blur(16px); border: 1.5px solid rgba(255,255,255,0.9); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--ombre); display: flex; align-items: center; gap: 16px; }
.meteo-icon { width: 52px; height: 52px; background: linear-gradient(135deg,#fffbe6,#fef08a); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.meteo-icon svg { width: 28px; height: 28px; }
.meteo-icon,
.meteo-icon svg {
  color: var(--vert, #29450C) !important;
}
.meteo-info h3 { font-size: 17px; font-weight: 800; color: var(--vert, #29450C); }
.meteo-info .temp { font-size: 32px; font-weight: 800; color: var(--h1); line-height: 1; }
.meteo-info .desc { font-size: 12px; color: #666; font-weight: 600; }
.quick-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick-card { background: rgba(255,255,255,0.82); backdrop-filter: blur(16px); border: 1.5px solid rgba(255,255,255,0.9); border-radius: var(--radius-sm); padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--ombre); text-decoration: none; transition: all .2s; cursor: pointer; }
.quick-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--ombre-hover); }
.qc-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qc-icon svg { width: 26px; height: 26px; }
.quick-card .qc-icon,
.quick-card .qc-icon svg {
  color: var(--vert, #29450C) !important;
}
.qc-label { font-size: 13px; font-weight: 800; color: var(--gris); line-height: 1.3; }
.qc-sub { font-size: 11px; color: #888; font-weight: 600; }

/* =====================================================
   FOND DIAPORAMA
   Ajouté avec hero_bg_type = "diapo". Un .diapo-img par
   photo, cross-fade ou glissement géré par le petit script
   dans hero.php. z-index:0 pour rester SOUS le voile
   .hero-bg::after (z-index:1) défini plus haut.
===================================================== */
.hero-bg-diapo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-bg-diapo .diapo-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}
/* Fondu enchaîné (par défaut) */
.hero-bg-diapo-fondu .diapo-img {
  transition: opacity 1.2s ease;
}
.hero-bg-diapo-fondu .diapo-img.active {
  opacity: 1;
}
/* Glissement */
.hero-bg-diapo-glissement .diapo-img {
  transform: translateX(100%);
  transition: transform 1s ease, opacity 0s;
}
.hero-bg-diapo-glissement .diapo-img.active {
  opacity: 1;
  transform: translateX(0);
}

/* =====================================================
   FOND VIDÉO
   Ajouté avec hero_bg_type = "video". Le wrapper porte
   l'image de secours (poster) en background-image inline
   (voir hero.php) ; la vidéo/l'iframe vient par-dessus une
   fois chargée en JS (jamais sur mobile, voir media query
   plus bas). z-index:0, même logique que le diaporama.
===================================================== */
.hero-bg-video-wrap {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
  border: none;
}
.hero-bg-video.is-loaded {
  opacity: 1;
}
.hero-bg-video-iframe {
  pointer-events: none; /* pas de contrôles, purement décoratif */
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-right { display: none; } /* météo + cartes rapides masquées : le fond (image/diapo/vidéo) continue de s'afficher normalement derrière le texte */
}
@media (max-width: 768px) {
  /* La vidéo n'est jamais téléchargée sur mobile (voir JS dans hero.php) :
     seule l'image de secours du wrapper (background-image inline,
     hero_bg_video_poster) reste visible — aucune règle CSS supplémentaire
     n'est nécessaire pour cette bascule, elle est déjà le comportement
     par défaut tant que .hero-bg-video n'a pas la classe .is-loaded. */
  .hero-bg-video { display: none; }
}
@media (max-width: 600px) {
  .quick-cards { grid-template-columns: 1fr; }
  /* Diaporama et vidéo restent en plein cadre (position:absolute inset:0),
     aucun ajustement nécessaire à cette largeur. */
}

/* ═══════════════════════════════════════════════
   RAPPEL — propriétés volontairement NON fixées ici
   (héritées de la typo globale, ne pas les remettre en dur) :
   .hero-title → font-size/family/letter-spacing/margin (rôle H1)
   .hero-tag(.eyebrow) → font-size/family/letter-spacing/gap (rôle Eyebrow)
════════════════════════════════════════════════ *//* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bf8c581 *//* =====================================================
   CSS — SECTION TICKER (bandeau défilant)
   Intègre Colorimétrie (data-palette) & Typographie.
   Suppose 00-base.css + erre-couleur-css + erre-typo-css déjà chargés.
===================================================== */

/* ---- Fond / texte : plus de redéclaration de --bg/--text/--accent-h1
   sur .ticker-bar (ça empêchait la vraie couleur de palette de
   s'appliquer). Le repli n'existe plus qu'au point d'usage, via le
   2e argument de var() — s'il n'y a aucune palette choisie ET que rien
   d'autre ne définit ces variables, ce repli prend le relai. ---- */
.ticker-bar {
  background: var(--bg, #2d5240);
  color: var(--text, #fff);
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative !important;
}

/* ---- Badge "eyebrow" : habillage visuel uniquement (fond, position),
   la police/taille/transformation/espacement viennent du rôle "Eyebrow"
   de erre_typo_css.php ---- */
.ticker-label {
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  height: 100% !important; /* filet de sécurité en plus de top/bottom */
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-h1, #c8612a);
  color: #fff;
  padding: 0 18px;
  z-index: 2;
}
.ticker-label svg { width: 14px; height: 14px; stroke: #fff; fill: none; }

.ticker-track {
  display: inline-block;
  vertical-align: top; /* corrige l'espace fantôme sous l'élément inline-block */
  animation: ticker 32s linear infinite;
  padding-left: 160px;
  font-size: 14px;
  font-weight: 600;
}
.ticker-item { margin-right: 60px; display: inline-flex; align-items: center; gap: 8px; }
.ticker-item svg { width: 13px; height: 13px; stroke: var(--text, #fff); opacity: .65; fill: none; flex-shrink: 0; }
.ticker-sep { color: var(--accent-h1, #c8612a); margin-right: 60px; }

@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 768px) {
  .ticker-label { padding: 0 12px; font-size: 12px; }
  .ticker-track { padding-left: 120px; font-size: 13px; }
  .ticker-item { margin-right: 40px; gap: 6px; }
  .ticker-sep { margin-right: 40px; }
}
@media (max-width: 480px) {
  .ticker-label { padding: 0 10px; }
  .ticker-label svg { width: 12px; height: 12px; }
  .ticker-track { padding-left: 100px; font-size: 12px; }
  .ticker-item { margin-right: 28px; gap: 5px; }
  .ticker-item svg { width: 11px; height: 11px; }
  .ticker-sep { margin-right: 28px; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-45d5a74 *//* CSS COMPLET pour le widget Shortcode [erre_demarches] — À coller dans
   Elementor > Avancé > CSS personnalisé.
   MISE À JOUR — même passage que sur Actualités : plus aucune couleur
   de marque codée en dur en dehors de la charte héraldique, plus de
   redéclaration figée de --bg sur .services-bg, et responsive ajouté
   (absent du fichier d'origine). */

/* =====================================================
   CSS GLOBAL — Erre Commune
   À charger EN PREMIER, avant tous les autres CSS de section
===================================================== */

:root {
  --gris: #3a3a3a;
  --gris-moyen: #6b6b6b;
  --gris-clair: #f0efec;
  --gris-bordure: #e2ddd6;

  --blanc: #ffffff;
  --noir-doux: #1e2a22;

  --ombre: 0 4px 24px rgba(0,0,0,0.08);
  --ombre-hover: 0 8px 40px rgba(0,0,0,0.14);
  --radius: 18px;
  --radius-sm: 10px;
}

body:not(.wp-admin) * { box-sizing: border-box; }

svg.i { display:inline-block; width:1em; height:1em; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.section { padding: 70px 28px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 48px; }

.section-tag {
  background: color-mix(in srgb, var(--h2-h5, #29450c) 12%, white);
  color: var(--h2-h5, #29450c);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 20px; margin-bottom: 12px;
}
.section-tag svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }

.section-title { color: var(--h2-h5, #29450c); margin-top: 0; }
.section-subtitle { color: var(--text, #6b6b6b); margin-top: 10px; }

/* ── DÉMARCHES ── */

/* Fond de section : suit la palette choisie ; repli au point d'usage
   uniquement — pas de redéclaration figée de --bg ici (même principe
   que Ticker/Actualités). */
.services-bg { background: var(--bg, #ffffff); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.service-card {
  background: var(--gris-clair);
  border-radius: var(--radius);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  text-decoration: none;
  transition: all .25s;
  cursor: pointer;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre);
}

/* Couleur fixée PAR CARTE via le champ ACF "couleur" (vert/orange),
   traduite en style en ligne par demarches.php — indépendante de la
   palette de section, comme les badges de catégorie Actualités/Agenda.
   ⚠️ La couleur est posée en propriété CSS "color" (pas "stroke") sur
   .sc-icon, parce que le sprite définit stroke="currentColor" à
   l'intérieur du symbole — même piège que rencontré sur le Hero. */
.sc-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-icon svg { width: 26px; height: 26px; }

.sc-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--gris);
  line-height: 1.3;
}

.sc-arrow {
  font-size: 12px;
  font-weight: 800;
  color: #29450c;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.sc-arrow svg { width: 13px; height: 13px; transition: transform .2s; }
.service-card:hover .sc-arrow svg { transform: translateX(3px); }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .section { padding: 50px 24px; }
  .section-head { margin-bottom: 36px; }
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .service-card { padding: 22px 16px; }
}
@media (max-width: 600px) {
  .section { padding: 40px 18px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sc-icon { width: 48px; height: 48px; }
  .sc-icon svg { width: 22px; height: 22px; }
  .sc-title { font-size: 13px; }
  .sc-arrow { font-size: 11px; }
}
@media (max-width: 380px) {
  .services-grid { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-3f6ac7b *//* CSS COMPLET pour le widget Shortcode [erre_actualites] — À coller dans
   Elementor > Avancé > CSS personnalisé (variables globales + CSS de
   cette section).
   MISE À JOUR COMPLÈTE — passage à la charte héraldique + typographie :
   - Le bloc :root ne contient plus que des tokens neutres (gris, blanc,
     ombres, radius). Les anciennes couleurs de marque (vert-fonce, cta,
     ocre, beige...) sont supprimées : elles n'existent plus nulle part
     dans le système actuel, donc les garder ne servait qu'à masquer en
     silence une vraie couleur de palette (même bug que celui trouvé sur
     le Ticker : une redéclaration figée gagne sur la couleur choisie).
   - .btn/.btn-primary/.btn-outline SUPPRIMÉS : ces classes datent d'avant
     le système de boutons de la Colorimétrie. Les vrais styles
     (.btn-or/.btn-vert/.btn-contour-or/.btn-rouge) sont générés par
     erre_couleur_css.php et contiennent déjà toute la mise en forme
     (padding, radius, transition) — plus besoin de les dupliquer ici.
   - Toutes les couleurs "fixes" (indépendantes de la palette de section,
     ex. le fond de vignette par défaut, l'icône date) utilisent
     désormais directement les valeurs hexadécimales de la charte
     héraldique, au lieu de variables qui n'existent plus.
   - .actus-bg ne redéclare plus --bg/--h2-h5/--text : le repli vit
     uniquement au point d'usage via var(--x, repli), pour ne jamais
     faire concurrence à la vraie couleur de palette choisie dans
     Réglages > Infos génériques > Colorimétrie.
*/

/* =====================================================
   CSS GLOBAL — Erre Commune
   À charger EN PREMIER, avant tous les autres CSS de section
===================================================== */

:root {
  --gris: #3a3a3a;
  --gris-moyen: #6b6b6b;
  --gris-clair: #f0efec;
  --gris-bordure: #e2ddd6;

  --blanc: #ffffff;
  --noir-doux: #1e2a22;

  --ombre: 0 4px 24px rgba(0,0,0,0.08);
  --ombre-hover: 0 8px 40px rgba(0,0,0,0.14);
  --radius: 18px;
  --radius-sm: 10px;
}

/* Reset léger (ne touche pas à l'admin WP, seulement le front) */
body:not(.wp-admin) * { box-sizing: border-box; }

svg.i { display:inline-block; width:1em; height:1em; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ── Blocs communs à toutes les sections ── */
.section { padding: 70px 28px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 48px; }

/* section-tag : habillage visuel (fond teinté + forme) piloté par la
   palette de LA SECTION qui l'entoure (var(--h2-h5) défini sur le
   wrapper .xxx-bg ci-dessous) ; police/taille/transform/espacement
   viennent du rôle "Eyebrow" de erre_typo_css.php (classe eyebrow) */
.section-tag {
  background: color-mix(in srgb, var(--h2-h5, #29450c) 12%, white);
  color: var(--h2-h5, #29450c);
  padding: 5px 14px; border-radius: 20px; margin-bottom: 12px;
}
.section-tag svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
/* Variante manuelle, indépendante de la palette (usage ponctuel) —
   Or héraldique, texte noir pour le contraste RGAA (même convention
   que le bouton "Or" de la Colorimétrie). */
.section-tag.orange { background: #fef7d9; color: #7a5f00; }

/* section-title (h2) : couleur pilotée par la palette (var(--h2-h5)) ;
   police/taille/letter-spacing/marge-basse viennent du rôle "H2 à H5"
   de la Typographie. margin-top gardé ici (non géré par la typo, évite
   la marge par défaut du navigateur sur un h2). */
.section-title { color: var(--h2-h5, #29450c); margin-top: 0; }

/* section-subtitle (p) : couleur pilotée par la palette (var(--text)) ;
   taille/marge-basse viennent du rôle "Texte". margin-top gardé (espace
   fixe entre le titre et le sous-titre, non géré par la typo). */
.section-subtitle { color: var(--text, #6b6b6b); margin-top: 10px; }

/* Animations partagées */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ── ACTUALITÉS ── */

/* Fond de section : suit la palette choisie (var(--bg)) ; repli au
   point d'usage seulement, aucune redéclaration figée de --bg/--h2-h5/
   --text sur .actus-bg (voir note en tête de fichier). */
.actus-bg { background: var(--bg, #f0efec); }

.actu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }

.actu-card {
  background: var(--blanc); border-radius: var(--radius);
  box-shadow: var(--ombre); overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .25s; cursor: pointer; text-decoration: none;
}
.actu-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-hover); }

/* Vignette par défaut (pas de photo) : couleur FIXE, indépendante de la
   palette de section — la carte elle-même reste sur fond blanc quel
   que soit le choix de palette, donc son placeholder reste neutre lui
   aussi plutôt que de suivre --h2-h5 (qui pourrait jurer sur le blanc
   selon la palette active). Vert clair héraldique en dur. */
.actu-img {
  height: 180px; background: #d4d9ce;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.actu-img svg { width: 48px; height: 48px; color: #29450c; opacity: .35; fill: none; }

/* Badge de catégorie : piloté individuellement par l'icône/couleur ACF
   de la catégorie WordPress elle-même (inline style depuis le terme),
   indépendant de la palette de section. La couleur ci-dessous n'est
   qu'un REPLI si la catégorie n'a pas de couleur définie. */
.actu-cat {
  position: absolute; top: 14px; left: 14px;
  background: #29450c; color: #fff;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 20px;
}
/* Variante manuelle "orange" (Or héraldique) — texte noir pour le
   contraste RGAA, comme .section-tag.orange plus haut. */
.actu-cat.orange { background: #fdcc06; color: #0c0703; }

/* Contenu de carte : microcopy d'interface compacte, volontairement en
   taille fixe (pas de balises h2-h5/p réelles ici, et une carte doit
   rester compacte quel que soit le réglage de la Typographie globale).
   Couleurs fixes elles aussi, pour la même raison que .actu-img :
   la carte reste sur fond blanc en toutes circonstances. */
.actu-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.actu-date { font-size: 11px; font-weight: 700; color: var(--gris-moyen); text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; }
.actu-date svg { width: 12px; height: 12px; color: #29450c; fill: none; }
.actu-title { font-size: 16px; font-weight: 800; color: var(--gris); line-height: 1.35; }
.actu-excerpt { font-size: 13px; color: var(--gris-moyen); font-weight: 600; line-height: 1.6; flex: 1; }
.actu-lire { font-size: 12px; font-weight: 800; color: #29450c; display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.actu-lire svg { width: 12px; height: 12px; fill: none; transition: transform .2s; }
.actu-card:hover .actu-lire svg { transform: translateX(3px); }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 900px) {
  .section { padding: 50px 24px; }
  .section-head { margin-bottom: 36px; }
  .actu-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
}
@media (max-width: 600px) {
  .section { padding: 40px 18px; }
  .actu-grid { grid-template-columns: 1fr; gap: 16px; }
  .actu-img { height: 150px; }
  .actu-img svg { width: 36px; height: 36px; }
  .actu-body { padding: 16px; }
  .actu-title { font-size: 15px; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-351ce18 *//* ═══════════════════════════════════════════════
   CARTE INTERACTIVE (erre-carte) — section homepage
   CSS autonome — à coller dans Elementor > Avancé > CSS personnalisé
   du widget shortcode [erre_carte_interactive]

   Palette au choix sur le fond de section (data-palette, variables
   erre_couleur_css.php) + bloc partagé .section-tag/.section-title/
   .section-subtitle (même correction que Démarches/Actualités/Agenda/
   Urgences/Contact/Galerie — color-mix sur --h2-h5, plus de tailles
   figées, héritées de la typo globale). Couleurs des catégories de
   points : fixes, indépendantes de la palette (même principe que les
   autres systèmes de catégories du site).
════════════════════════════════════════════════ */
.erre-carte-bg { padding:70px 28px; background:var(--bg, #faf8f4); }
.erre-carte-inner { max-width:1200px; margin:0 auto; }
.erre-carte-head { text-align:center; max-width:640px; margin:0 auto 32px; }

/* Bloc partagé (identique aux autres sections homepage) */
.section-tag { display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--h2-h5, #29450c) 12%, #fff); color:var(--h2-h5, #29450c); border-radius:20px; padding:5px 14px; margin-bottom:14px; }
.section-tag svg { width:13px; height:13px; stroke:currentColor; flex-shrink:0; }
.section-title { color:var(--h2-h5, #29450c); line-height:1.1; }
.section-subtitle { color:var(--text, #6b6b6b); margin-top:10px; }

/* Filtres */
.erre-carte-filtres { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:24px; }
.erre-carte-filtre { display:flex; align-items:center; gap:8px; padding:9px 18px; border-radius:30px; border:1.5px solid #e2ddd6; background:#fff; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; color:#3a3a3a; cursor:pointer; transition:all .2s; }
.erre-carte-filtre svg { width:14px; height:14px; stroke:currentColor; }
.erre-carte-filtre-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.erre-carte-filtre:hover:not(.active) { border-color:#29450c; }
.erre-carte-filtre.active { background:#29450C; border-color:#29450C; color:#fff; }

/* Carte */
.erre-carte-map { width:100%; border-radius:18px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.1); z-index:1; }
.erre-carte-empty { text-align:center; color:#6b6b6b; font-weight:600; }

/* Pin personnalisé (divIcon) */
.erre-carte-pin span {
  display:block; width:24px; height:24px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); box-shadow:0 2px 6px rgba(0,0,0,0.35);
  border:2px solid #fff;
}

/* Bulle (popup Leaflet) */
.erre-carte-popup { font-family:'Nunito',sans-serif; font-size:13px; color:#3a3a3a; line-height:1.5; }
.erre-carte-popup strong { font-size:14px; color:#29450C; }
.erre-carte-popup p { margin:6px 0 0; font-weight:600; color:#555; }
.erre-carte-popup a { display:inline-block; margin-top:8px; font-weight:800; color:#29450C; }
.leaflet-popup-content-wrapper { border-radius:12px; }

/* Légende */
.erre-carte-legende { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:20px; }
.erre-carte-legende-item { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#3a3a3a; }
.erre-carte-legende-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media(max-width:900px) {
  .erre-carte-bg { padding:50px 24px; }
  .erre-carte-head { margin-bottom:24px; }
}
@media(max-width:600px) {
  .erre-carte-bg { padding:40px 18px; }
  .erre-carte-filtres { gap:8px; }
  .erre-carte-filtre { padding:8px 14px; font-size:12px; }
  .erre-carte-legende { gap:12px; }
  .erre-carte-legende-item { font-size:11.5px; }
}

/* ═══════════════════════════════════════════════
   RAPPEL — propriétés volontairement NON fixées ici
   (héritées de la typo globale, ne pas les remettre en dur) :
   .section-tag  → font-size/family/letter-spacing/gap (rôle eyebrow)
   .section-title → font-size/weight/letter-spacing (rôle H2 à H5)
════════════════════════════════════════════════ *//* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-31c6789 *//* CSS COMPLET pour le widget Shortcode [erre_agenda] — À coller dans
   Elementor > Avancé > CSS personnalisé (variables globales + CSS de
   cette section).
   MISE À JOUR COMPLÈTE — même passage que sur Actualités/Démarches :
   - :root nettoyé des couleurs de marque obsolètes (vert-fonce, cta,
     ocre, beige...), ne garde que les tokens neutres.
   - .btn/.btn-primary/.btn-outline SUPPRIMÉS (obsolètes, remplacés par
     .btn-or/.btn-vert/.btn-contour-or/.btn-rouge générés par
     erre_couleur_css.php).
   - .agenda-bg ne redéclare plus --bg/--h2-h5/--text en dur (c'était
     exactement le bug trouvé sur le Ticker : la redéclaration figée
     gagnait sur la vraie couleur de palette choisie dans l'admin,
     quel que soit le choix fait).
   - Piège currentColor corrigé sur .event-meta svg (stroke:#aaa n'a
     aucun effet, il faut color:#aaa — le sprite lit currentColor via
     la propriété color, jamais stroke).
   - Responsive ajouté (absent du fichier d'origine).
   ⚠️ .event-tag : sa couleur vient de la taxonomie erre_type_evenement
   (couleur par terme, injectée en style inline depuis agenda.php).
   Cette couleur inline doit être posée via la propriété CSS "color"
   (pas seulement "background") pour que l'icône du tag s'affiche —
   je n'ai pas agenda.php sous les yeux pour vérifier, à contrôler.
*/

/* =====================================================
   CSS GLOBAL — Erre Commune
   À charger EN PREMIER, avant tous les autres CSS de section
===================================================== */

:root {
  --gris: #3a3a3a;
  --gris-moyen: #6b6b6b;
  --gris-clair: #f0efec;
  --gris-bordure: #e2ddd6;

  --blanc: #ffffff;
  --noir-doux: #1e2a22;

  --ombre: 0 4px 24px rgba(0,0,0,0.08);
  --ombre-hover: 0 8px 40px rgba(0,0,0,0.14);
  --radius: 18px;
  --radius-sm: 10px;
}

body:not(.wp-admin) * { box-sizing: border-box; }

svg.i { display:inline-block; width:1em; height:1em; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ── Blocs communs à toutes les sections ── */
.section { padding: 70px 28px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 48px; }

.section-tag {
  background: color-mix(in srgb, var(--h2-h5, #29450c) 12%, white);
  color: var(--h2-h5, #29450c);
  padding: 5px 14px; border-radius: 20px; margin-bottom: 12px;
}
.section-tag svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
/* Variante manuelle, indépendante de la palette (utilisée par Agenda
   par défaut, voir PHP) — Or héraldique, texte noir pour le contraste
   RGAA, même convention que .section-tag.orange sur Actualités. */
.section-tag.orange { background: #fef7d9; color: #7a5f00; }

.section-title { color: var(--h2-h5, #29450c); margin-top: 0; }
.section-subtitle { color: var(--text, #6b6b6b); margin-top: 10px; }

@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ── AGENDA ── */

/* Fond de section : suit la palette choisie ; repli au point d'usage
   uniquement, aucune redéclaration figée ici (voir note en tête de
   fichier). */
.agenda-bg { background: var(--bg, #f0efec); }

.agenda-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 20px; }
.event-card { background: var(--blanc); border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre); display: flex; transition: all .25s; cursor: pointer; }
.event-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-hover); }

/* Date + tag : couleur pilotée individuellement par le type d'événement
   (taxonomie erre_type_evenement, champ "couleur" sur le terme),
   indépendante de la palette de section — même principe que le
   vert/orange des cartes Démarches et le badge de catégorie Actualités */
.event-date { width: 80px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 20px 10px; }
.event-day { font-size: 34px; font-weight: 900; line-height: 1; color: var(--blanc); }
.event-month { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.85); text-transform: uppercase; }
.event-body { padding: 18px 20px; flex: 1; }
.event-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 3px 8px 3px 6px; border-radius: 10px; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.event-tag svg { width: 11px; height: 11px; fill: none; flex-shrink: 0; }

/* Titre/meta de carte : microcopy d'interface compacte, taille fixe
   (pas de vraies balises h2-h5/p ici, doit rester compact quel que soit
   le réglage de la Typographie globale) */
.event-title { font-size: 15px; font-weight: 800; color: var(--gris); line-height: 1.3; }
.event-meta { font-size: 12px; color: #888; font-weight: 600; margin-top: 6px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.event-meta span { display: flex; align-items: center; gap: 5px; }
.event-meta svg { width: 12px; height: 12px; color: #aaa; fill: none; }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 900px) {
  .section { padding: 50px 24px; }
  .section-head { margin-bottom: 36px; }
  .agenda-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
}
@media (max-width: 600px) {
  .section { padding: 40px 18px; }
  .agenda-grid { grid-template-columns: 1fr; gap: 14px; }
  .event-date { width: 64px; padding: 14px 8px; }
  .event-day { font-size: 26px; }
  .event-month { font-size: 11px; }
  .event-body { padding: 14px 16px; }
  .event-title { font-size: 14px; }
  .event-meta { gap: 10px; font-size: 11px; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-00ff25a *//* CSS COMPLET pour le widget Shortcode [erre_galerie] — À coller dans
   Elementor > Avancé > CSS personnalisé.
   MISE À JOUR COMPLÈTE — même passage que sur Actualités/Démarches/Agenda :
   - :root nettoyé des couleurs de marque obsolètes.
   - .btn/.btn-primary/.btn-outline SUPPRIMÉS (obsolètes).
   - .galerie-bg ne redéclare plus --bg/--h2-h5/--text/--accent-h1 en dur
     (même bug que Ticker/Agenda : la redéclaration figée bloquait la
     vraie couleur de palette ET la couleur du badge .gal-tag, qui
     dépend de --accent-h1).
   - Responsive complété : le palier 900px existant (réorganisation de
     la grille) est conservé, un palier 600px est ajouté pour le mobile
     (hauteurs de photo réduites, padding de section réduit — absents
     du fichier d'origine).
*/

/* =====================================================
   CSS GLOBAL — Erre Commune
   À charger EN PREMIER, avant tous les autres CSS de section
===================================================== */

:root {
  --gris: #3a3a3a;
  --gris-moyen: #6b6b6b;
  --gris-clair: #f0efec;
  --gris-bordure: #e2ddd6;

  --blanc: #ffffff;
  --noir-doux: #1e2a22;

  --ombre: 0 4px 24px rgba(0,0,0,0.08);
  --ombre-hover: 0 8px 40px rgba(0,0,0,0.14);
  --radius: 18px;
  --radius-sm: 10px;
}

body:not(.wp-admin) * { box-sizing: border-box; }

svg.i { display:inline-block; width:1em; height:1em; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ── Blocs communs à toutes les sections ── */
.section { padding: 70px 28px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 48px; }

.section-tag {
  background: color-mix(in srgb, var(--h2-h5, #29450c) 12%, white);
  color: var(--h2-h5, #29450c);
  padding: 5px 14px; border-radius: 20px; margin-bottom: 12px;
}
.section-tag svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.section-tag.orange { background: #fef7d9; color: #7a5f00; }

.section-title { color: var(--h2-h5, #29450c); margin-top: 0; }
.section-subtitle { color: var(--text, #6b6b6b); margin-top: 10px; }

@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ── GALERIE ── */

/* Fond de section : suit la palette choisie ; repli au point d'usage
   uniquement, aucune redéclaration figée ici (voir note en tête de
   fichier). */
.galerie-bg { background: var(--bg, #f2ede4); }

.galerie-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.gal-large { grid-column: 1; }
.gal-stack { grid-column: 2; display: flex; flex-direction: column; gap: 14px; }
.gal-stack .gal-item { flex: 1; }
.galerie-bottom-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.gal-item { position: relative; overflow: hidden; border-radius: 14px; background: var(--gris-clair); cursor: pointer; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gal-large .gal-item img { height: 380px; }
.gal-stack .gal-item img { height: 178px; }
.galerie-bottom-row .gal-item img { height: 210px; }
.gal-item:hover img { transform: scale(1.04); }

/* Légende : dégradé sombre fixe pour la lisibilité du texte sur photo,
   indépendant de la palette (même principe que l'overlay du Hero) */
.gal-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 16px 14px; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%); color: #fff; display: flex; flex-direction: column; gap: 4px; }

/* Badge sur chaque photo : pas de système de couleur par image (pas de
   taxonomie ni de champ couleur dédié comme Agenda/Actualités), donc
   piloté par la couleur accent de la palette de section ; repli au
   point d'usage seulement (voir note en tête de fichier). */
.gal-tag { display: inline-block; background: var(--accent-h1, #29450c); color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 3px 8px; border-radius: 10px; align-self: flex-start; }

/* Texte de légende : microcopy compacte sur photo, taille fixe */
.gal-caption p { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.92); line-height: 1.3; }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 900px) {
  .section { padding: 50px 24px; }
  .section-head { margin-bottom: 36px; }
  .galerie-grid { grid-template-columns: 1fr; }
  .gal-stack { flex-direction: row; }
  .galerie-bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .section { padding: 40px 18px; }
  .gal-stack { flex-direction: column; }
  .gal-large .gal-item img { height: 220px; }
  .gal-stack .gal-item img { height: 140px; }
  .galerie-bottom-row .gal-item img { height: 150px; }
  .gal-caption { padding: 24px 12px 10px; }
  .gal-caption p { font-size: 12px; }
  .gal-tag { font-size: 8px; padding: 2px 6px; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-cca34df *//* CSS COMPLET pour le widget Shortcode [erre_urgences] — À coller dans
   Elementor > Avancé > CSS personnalisé.
   MISE À JOUR COMPLÈTE — même passage que sur Actualités/Démarches/
   Agenda/Galerie :
   - :root nettoyé des couleurs de marque obsolètes.
   - .btn/.btn-primary/.btn-outline SUPPRIMÉS (obsolètes).
   - .urgences-section ne redéclare plus --bg/--h2-h5/--text en dur
     (même bug que Ticker/Agenda/Galerie).
   - Piège currentColor corrigé sur .mc-icon svg et .mc-infos li svg
     (stroke: var(--vert...) n'avait aucun effet en plus d'utiliser une
     variable obsolète — il faut color, jamais stroke, sur les icônes
     du sprite).
   - Responsive complété : palier 900px ajouté, palier 600px existant
     affiné.
   ⚠️ .uc-icon (couleur individuelle par numéro d'urgence, champ
   "couleur" du repeater) : je n'ai pas urgences.php sous les yeux pour
   vérifier que le style inline pose bien "color" en plus de
   "background" — même point de vigilance que sur Agenda/.event-tag.
*/

/* =====================================================
   CSS GLOBAL — Erre Commune
   À charger EN PREMIER, avant tous les autres CSS de section
===================================================== */

:root {
  --gris: #3a3a3a;
  --gris-moyen: #6b6b6b;
  --gris-clair: #f0efec;
  --gris-bordure: #e2ddd6;

  --blanc: #ffffff;
  --noir-doux: #1e2a22;
  --creme: #faf8f4;

  --ombre: 0 4px 24px rgba(0,0,0,0.08);
  --ombre-hover: 0 8px 40px rgba(0,0,0,0.14);
  --radius: 18px;
  --radius-sm: 10px;
}

body:not(.wp-admin) * { box-sizing: border-box; }

svg.i { display:inline-block; width:1em; height:1em; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ── Blocs communs à toutes les sections ── */
.section { padding: 70px 28px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 48px; }

.section-tag {
  background: color-mix(in srgb, var(--h2-h5, #29450c) 12%, white);
  color: var(--h2-h5, #29450c);
  padding: 5px 14px; border-radius: 20px; margin-bottom: 12px;
}
.section-tag svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
/* Variante manuelle, indépendante de la palette (utilisée par Urgences
   par défaut, voir PHP). */
.section-tag.orange { background: #fef7d9; color: #7a5f00; }

.section-title { color: var(--h2-h5, #29450c); margin-top: 0; }
.section-subtitle { color: var(--text, #6b6b6b); margin-top: 10px; }

@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ── URGENCES & SANTÉ ── */

/* Fond de section : suit la palette choisie ; repli au point d'usage
   uniquement, aucune redéclaration figée ici (voir note en tête de
   fichier). */
.urgences-section { background: var(--bg, #ffffff); }

/* Numéros d'urgence — couleur individuelle par numéro (champ "couleur"
   du repeater, en style inline), indépendante de la palette de section
   — même principe que le vert/orange des cartes Démarches */
.urgences-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 16px; margin-bottom: 48px; }
.urgence-card { background: var(--creme); border-radius: var(--radius); padding: 24px 16px; text-align: center; border: 2px solid var(--gris-bordure); transition: all .2s; }
.urgence-card:hover { transform: translateY(-3px); box-shadow: var(--ombre-hover); border-color: transparent; }
.uc-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.uc-icon svg { width: 24px; height: 24px; fill: none; }
.uc-numero { font-size: 36px; font-weight: 900; line-height: 1; margin-bottom: 6px; }
.uc-label { font-size: 13px; font-weight: 800; color: var(--gris); }
.uc-desc { font-size: 11px; color: var(--gris-moyen); font-weight: 600; margin-top: 4px; }

/* Médecins — icône de type fixe (vert héraldique), pas de couleur
   individuelle ici. Deux tons différents conservés (icône principale
   plus soutenue, petites icônes de la liste un peu plus douces) via
   color-mix plutôt qu'une 2e variable de vert qui n'existe plus dans
   la charte actuelle. */
.medecins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 20px; }
.medecin-card { background: var(--creme); border-radius: var(--radius); padding: 24px; border: 2px solid var(--gris-bordure); transition: all .2s; }
.medecin-card:hover { transform: translateY(-3px); box-shadow: var(--ombre-hover); border-color: #29450c; }
.mc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mc-icon { width: 50px; height: 50px; background: #d4d9ce; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mc-icon svg { width: 24px; height: 24px; color: #29450c; fill: none; }
.mc-type { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #29450c; }
.mc-nom { font-size: 17px; font-weight: 900; color: #29450c; }
.mc-infos { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mc-infos li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 600; color: #555; }
.mc-infos li svg { width: 14px; height: 14px; color: color-mix(in srgb, #29450c 75%, white); fill: none; flex-shrink: 0; margin-top: 2px; }
.mc-infos li a { color: #29450c; text-decoration: none; font-weight: 700; }
.mc-infos li a:hover { text-decoration: underline; }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 900px) {
  .section { padding: 50px 24px; }
  .section-head { margin-bottom: 36px; }
  .urgences-numeros { grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 36px; }
  .medecins-grid { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
}
@media (max-width: 600px) {
  .section { padding: 40px 18px; }
  .urgences-numeros { grid-template-columns: repeat(3,1fr); }
  .uc-numero { font-size: 28px; }
  .medecins-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .urgences-numeros { grid-template-columns: repeat(2,1fr); }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-4783efc *//* CSS COMPLET pour le widget Shortcode [erre_contact] — À coller dans
   Elementor > Avancé > CSS personnalisé.
   MISE À JOUR : intégration Colorimétrie (data-palette sur
   .contact-section) & Typographie (section-tag/title/subtitle suivent
   désormais les rôles Eyebrow / H2 à H5 / Texte) — même bloc partagé
   corrigé que les autres sections. */

/* =====================================================
   CSS GLOBAL — Erre Commune
   À charger EN PREMIER, avant tous les autres CSS de section
===================================================== */

:root {
  --vert: #4a7c59;
  --vert-fonce: #2d5240;
  --vert-clair: #eaf2ec;
  --vert-pale: #f4f8f5;

  --beige: #f2ede4;
  --beige-fonce: #e8e0d2;
  --creme: #faf8f4;

  --gris: #3a3a3a;
  --gris-moyen: #6b6b6b;
  --gris-clair: #f0efec;
  --gris-bordure: #e2ddd6;

  --cta: #c8612a;
  --cta-hover: #a84e20;
  --cta-clair: #fdf0e8;

  --blanc: #ffffff;
  --noir-doux: #1e2a22;

  --ocre: #c8612a;
  --ocre-clair: #fdf0e8;

  --ombre: 0 4px 24px rgba(0,0,0,0.08);
  --ombre-hover: 0 8px 40px rgba(0,0,0,0.14);
  --radius: 18px;
  --radius-sm: 10px;
}

body:not(.wp-admin) * { box-sizing: border-box; }

svg.i { display:inline-block; width:1em; height:1em; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ── Blocs communs à toutes les sections ── */
.section { padding: 70px 28px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 48px; }

.section-tag {
  background: color-mix(in srgb, var(--h2-h5) 12%, white);
  color: var(--h2-h5);
  padding: 5px 14px; border-radius: 20px; margin-bottom: 12px;
}
.section-tag svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.section-tag.orange { background: var(--ocre-clair); color: var(--ocre); }

.section-title { color: var(--h2-h5); margin-top: 0; }
.section-subtitle { color: var(--text); margin-top: 10px; }

.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 800; padding: 13px 26px; border-radius: 50px; transition: all .25s; cursor: pointer; border: none; }
.btn svg { width: 17px; height: 17px; fill: none; }
.btn-primary { background: var(--vert-fonce); color: var(--blanc); box-shadow: 0 4px 16px rgba(35,92,44,0.4); }
.btn-primary svg { stroke: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(35,92,44,0.45); background: #1a4721; }
.btn-outline { background: rgba(255,255,255,0.15); color: var(--blanc); border: 2px solid rgba(255,255,255,0.55); backdrop-filter: blur(8px); }
.btn-outline svg { stroke: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); }

@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ── CONTACT ── */

/* Palette de section : valeurs par défaut si aucune palette choisie
   (reproduit l'apparence d'origine : fond beige, titres vert foncé,
   accent vert — PAS terracotta ici, c'est le choix d'origine du
   fichier, préservé) */
.contact-section {
  --bg: var(--beige);
  --h2-h5: var(--vert-fonce);
  --text: var(--gris);
  --accent-h1: var(--vert);
}
.contact-section { background: var(--bg); }

.contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }

/* Coordonnées — affichées directement sur le fond de section, suivent
   donc la palette (texte, accent) */
.contact-infos { display: flex; flex-direction: column; gap: 24px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 16px; }
.ci-icon { width: 46px; height: 46px; background: var(--blanc); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--ombre); }
.ci-icon svg { width: 20px; height: 20px; stroke: var(--h2-h5); fill: none; }
.ci-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-h1); margin-bottom: 4px; }
.ci-value { font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none; }
.ci-value:hover { color: var(--h2-h5); }
.ci-horaire { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--gris-bordure); }
.ci-horaire:last-child { border-bottom: none; }
.ci-jour { color: var(--text); }
.ci-heure { color: var(--h2-h5); font-weight: 800; }

/* Formulaire CF7 — carte blanche fixe, indépendante de la palette de
   section (même principe que les autres cartes blanches du site) */
.contact-form { background: var(--blanc); border-radius: var(--radius); padding: 36px; box-shadow: var(--ombre); }
.contact-form .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea { width: 100%; padding: 12px 16px; border: 2px solid var(--gris-bordure); border-radius: 10px; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600; color: var(--gris); background: var(--creme); transition: border-color .2s; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--vert); background: var(--blanc); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input[type="submit"] { background: var(--vert-fonce); color: #fff; border: none; padding: 13px 28px; border-radius: 50px; font-size: 15px; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; transition: all .2s; align-self: flex-start; }
.contact-form input[type="submit"]:hover { background: #1a4721; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(35,92,44,0.35); }
.wpcf7-not-valid-tip { font-size: 12px; color: var(--cta); font-weight: 700; }
.wpcf7-response-output { font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 8px; border: none !important; background: var(--vert-clair); color: var(--vert-fonce); }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}/* End custom CSS */