/* =====================================================================
   Réseau Amylose — design system (maquette accueil v2)
   1. Tokens & base   2. Header / bandeau / footer (PHP)
   3. Composants HTML (carrousel, formulaires, carte, vidéos…)
   4. Couche de compatibilité Elementor (widgets natifs .ra-el-*)
   ===================================================================== */

/* ---------- 1. Tokens & base ---------- */
:root {
	--ra-bleu: #31A5E3;
	--ra-bleu-fonce: #1f7fb8;
	--ra-vert: #1BBB9B;
	--ra-rouge: #E9250B;
	--ra-rouge-hover: #c41e08;
	--ra-orange: #E05124;
	--ra-gris-txt: #555555;
	--ra-gris-muted: #7d8b9b;
	--ra-gris-clair: #f5f8fa;
	--ra-gris-bord: #e5edf2;
	--ra-noir: #000;
	--ra-blanc: #fff;
	--ra-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ra-wide: min(95%, 1600px);
}

html { scroll-behavior: smooth; }
body {
	font-family: var(--ra-font);
	color: var(--ra-gris-txt);
	line-height: 1.6;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "cv11", "ss01", "ss03";
}
body h1, body h2, body h3, body h4 { font-family: var(--ra-font); line-height: 1.2; letter-spacing: -.01em; }
a { color: var(--ra-vert); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* Boutons "thème" (utilisés dans les widgets HTML) */
.ra-btn { display: inline-block; padding: 14px 26px; font-family: var(--ra-font); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: .6px; transition: all .2s; border-radius: 4px; }
.ra-btn--rouge { background: var(--ra-rouge); color: #fff !important; }
.ra-btn--rouge:hover { background: var(--ra-rouge-hover); text-decoration: none; }
.ra-btn--bleu { background: var(--ra-bleu); color: #fff !important; }
.ra-btn--bleu:hover { background: var(--ra-bleu-fonce); text-decoration: none; }
.ra-btn--outline { background: transparent; color: var(--ra-bleu) !important; border: 2px solid var(--ra-bleu); }
.ra-btn--outline:hover { background: var(--ra-bleu); color: #fff !important; text-decoration: none; }

/* ---------- 2. Header ---------- */
.ra-header { background: #fff; border-bottom: 2px solid var(--ra-gris-bord); padding: 14px 0; }
.ra-header__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; max-width: var(--ra-wide); margin: 0 auto; }
.ra-logo { display: flex; align-items: center; }
.ra-logo img { height: 52px; width: auto; display: block; }
.ra-header__right { display: flex; align-items: center; gap: 22px; }
.ra-tel { display: flex; align-items: center; gap: 8px; color: var(--ra-gris-txt); font-weight: 600; font-size: 16px; }
.ra-tel:hover { text-decoration: none; color: var(--ra-bleu); }
.ra-tel__ico { color: var(--ra-bleu); display: inline-flex; }
.ra-btn-contact { background: var(--ra-rouge); color: #fff !important; padding: 14px 22px; font-weight: 600; font-size: 14px; letter-spacing: .6px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; border-radius: 4px; transition: background .2s; }
.ra-btn-contact:hover { background: var(--ra-rouge-hover); text-decoration: none; }

/* Bandeau 4 entrées */
.ra-entrees { background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-bottom: 3px solid #fff; padding: 0; position: relative; z-index: 20; }
.ra-entrees > li, .ra-entrees > .ra-entree-item { list-style: none; position: relative; display: flex; }
.ra-entrees > a, .ra-entrees > li > a, .ra-entree { background: var(--ra-bleu); padding: 22px 24px; color: #fff !important; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; font-weight: 600; font-size: 17px; text-transform: none; letter-spacing: .2px; transition: background .2s; line-height: 1.2; width: 100%; }
.ra-entrees > li > a:hover, .ra-entrees > a:hover { background: var(--ra-bleu-fonce); text-decoration: none; }

/* Sous-menu (menu déroulant WordPress natif, éditable depuis Apparence > Menus) */
.ra-entrees .sub-menu { list-style: none; margin: 0; padding: 10px; position: absolute; top: 100%; left: 0; min-width: 280px; background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 16px 40px rgba(20, 40, 60, .18); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 30; }
.ra-entrees li:hover > .sub-menu,
.ra-entrees li:focus-within > .sub-menu,
.ra-entrees li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translate(0, 0); }
.ra-entrees .sub-menu li { list-style: none; position: relative; }
.ra-entrees .sub-menu a { display: block; padding: 12px 14px; border-radius: 8px; color: var(--ra-noir) !important; font-weight: 500; font-size: 16px; text-transform: none; letter-spacing: normal; text-align: left; background: none; }
.ra-entrees .sub-menu a:hover { background: var(--ra-gris-clair); color: var(--ra-bleu) !important; text-decoration: none; }
.ra-entrees > li.menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid rgba(255,255,255,.85); border-bottom: 2px solid rgba(255,255,255,.85); transform: rotate(45deg); margin-left: 2px; }

/* Sous-sous-menus (2e niveau et plus) : déploiement en cascade vers la droite */
.ra-entrees .sub-menu .sub-menu { top: -10px; left: 100%; margin-left: 6px; border-radius: 10px; transform: translate(-6px, 0); }
.ra-entrees .sub-menu li.menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ra-entrees .sub-menu li.menu-item-has-children > a::after { content: ""; width: 6px; height: 6px; flex: none; border-right: 2px solid var(--ra-bleu); border-bottom: 2px solid var(--ra-bleu); transform: rotate(-45deg); }

/* Footer */
.ra-footer { background: #1a2942; color: #cfd8e3; padding: 50px 0 20px; font-size: 14px; border-top: 4px solid var(--ra-bleu); }
.ra-footer__cols { display: grid; grid-template-columns: 1.1fr 1.2fr 1.5fr; gap: 50px; max-width: var(--ra-wide); margin: 0 auto; }
.ra-footer h4 { color: #fff; font-size: 15px; margin: 0 0 22px; font-weight: 700; position: relative; padding-top: 16px; }
.ra-footer h4::before { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 3px; background: var(--ra-bleu); border-radius: 2px; }
.ra-footer a { color: #cfd8e3; transition: color .2s; }
.ra-footer a:hover { color: var(--ra-bleu); text-decoration: none; }
.ra-footer address { font-style: normal; line-height: 1.65; color: #cfd8e3; margin-bottom: 14px; font-size: 14px; }
.ra-footer__titre { color: #fff; font-weight: 700; margin-bottom: 4px; font-size: 14px; }
.ra-footer__map { display: inline-flex; align-items: center; gap: 6px; color: var(--ra-bleu) !important; font-size: 14px; font-weight: 600; }
.ra-contact-item { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.ra-contact-item__ico { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(49,165,227,.18); color: var(--ra-bleu); }
.ra-contact-item--rouge .ra-contact-item__ico { background: rgba(233,37,11,.18); color: #ff6b50; }
.ra-contact-item__label { font-size: 14px; color: #cfd8e3; line-height: 1.3; display: flex; flex-direction: column; }
.ra-contact-item__label strong { color: #fff; font-weight: 600; font-size: 14px; }
.ra-social { margin-top: 16px; display: flex; gap: 8px; }
.ra-social a { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; color: #cfd8e3; border: 1px solid rgba(255,255,255,.1); transition: all .2s; }
.ra-social a:hover { background: var(--ra-bleu); color: #fff; border-color: var(--ra-bleu); transform: translateY(-2px); }
.ra-partners { display: flex; flex-wrap: wrap; gap: 6px; }
.ra-partners a { font-size: 14px; padding: 5px 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 30px; line-height: 1.2; white-space: nowrap; transition: all .2s; }
.ra-partners a:hover { background: var(--ra-bleu); border-color: var(--ra-bleu); color: #fff; }
.ra-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); margin: 36px auto 0; padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; color: #8a99af; max-width: var(--ra-wide); }
.ra-footer__legal { display: flex; gap: 24px; align-items: center; }
.ra-footer__legal li { display: contents; list-style: none; }
.ra-footer__legal a { color: #a8b5cc; }

/* ---------- 3. Composants HTML ---------- */

/* Carrousel (widget HTML) */
.ra-carousel { max-width: var(--ra-wide); margin: 0 auto; }
.ra-carousel__track { position: relative; overflow: hidden; border-radius: 24px; background: #fff; }
.ra-carousel__slides { display: flex; transition: transform .7s cubic-bezier(.65,.05,.36,1); }
.ra-slide { min-width: 100%; display: grid; grid-template-columns: 7fr 5fr; align-items: stretch; min-height: 440px; }
.ra-slide__text { padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; }
.ra-slide__num { font-size: 14px; font-weight: 600; color: #c0cad6; letter-spacing: .12em; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.ra-slide__num strong { color: var(--ra-noir); font-size: 16px; font-weight: 800; }
.ra-slide__num .bar { width: 30px; height: 2px; background: #c0cad6; }
.ra-slide__tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(27,187,155,.12); color: var(--ra-vert); padding: 6px 14px; border-radius: 30px; font-size: 14px; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: .1em; align-self: flex-start; }
.ra-slide__tag::before { content: ""; width: 6px; height: 6px; background: var(--ra-vert); border-radius: 50%; }
.ra-slide__title { font-size: 38px; color: var(--ra-noir); margin: 0 0 16px; line-height: 1.12; font-weight: 800; letter-spacing: -.025em; }
.ra-slide__meta { font-size: 14px; color: var(--ra-gris-muted); margin-bottom: 16px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.ra-slide__text p { font-size: 16px; color: var(--ra-gris-txt); margin: 0 0 30px; max-width: 520px; line-height: 1.65; }
.ra-arrow-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ra-noir); color: #fff !important; padding: 15px 26px; font-size: 14px; font-weight: 600; border-radius: 50px; transition: all .25s; align-self: flex-start; }
.ra-arrow-btn:hover { background: var(--ra-rouge); text-decoration: none; transform: translateX(3px); gap: 14px; }
.ra-slide__visual { position: relative; overflow: hidden; background: #e8eef3; }
.ra-slide__visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.ra-slide:hover .ra-slide__visual img { transform: scale(1.04); }
.ra-slide__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(49,165,227,.08), transparent 50%, rgba(31,127,184,.12)); pointer-events: none; }
.ra-badge { position: absolute; top: 24px; left: 24px; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); padding: 8px 14px; border-radius: 30px; font-size: 14px; font-weight: 700; color: var(--ra-bleu); text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 4px 14px rgba(0,0,0,.08); display: flex; align-items: center; gap: 6px; z-index: 3; }

/* Carrousel d'en-tête dynamique (Loop Carousel Elementor) : même gabarit de hauteur que l'ancien slider
   codé en dur (min-height 440px, image recadrée en cover) — une vraie image d'article, à la différence des
   visuels de maquette, n'a pas un ratio prévisible et peut sinon étirer la diapositive bien au-delà. */
/* Elementor n'applique pas toujours _css_classes sur une colonne (uniquement testé et fiable sur les
   widgets) : le gabarit de hauteur est donc porté directement par le widget image lui-même. */
/* Image "encadrée" plutôt que collée aux bords : les visuels d'articles sont souvent des affiches
   promotionnelles chargées (couleurs, texte, logos) — sans marge ni ombrage elles jurent avec le panneau
   de texte à côté. La carte flotte avec un léger retrait, des coins plus arrondis et une ombre douce. */
.ra-el-hero-img,
.ra-el-hero-img .elementor-widget-container { border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 20px 45px rgba(15,40,70,.16); }
.ra-el-hero-img { margin: 6px 0 6px 6px; }
/* Ces visuels sont presque tous des affiches (titre tout en haut, logos/QR code en bas) recadrées dans
   ce cadre large — aligner le recadrage sur le HAUT plutôt que le centre préserve le titre à chaque
   fois, quitte à perdre le bas de l'affiche (bandeau de logos partenaires, moins essentiel). Un centrage
   vertical (même léger) coupait le titre sur certains visuels selon leurs proportions propres. */
.ra-el-hero-img img { width: 100%; height: 420px; object-fit: cover; object-position: top; display: block; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.ra-el-hero-img:hover img { transform: scale(1.04); }
@media (max-width: 767px) { .ra-el-hero-img { margin: 0; } }
.ra-el-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(49,165,227,.12), transparent 50%, rgba(31,127,184,.16)); pointer-events: none; }
@media (max-width: 767px) {
	.ra-el-hero-img img { height: auto; aspect-ratio: 16 / 9; }
}
.ra-badge::before { content: ""; width: 6px; height: 6px; background: var(--ra-rouge); border-radius: 50%; animation: ra-pulse 2s ease-out infinite; }
@keyframes ra-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.4); opacity: 0; } }
.ra-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 0; color: var(--ra-noir); box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 5; display: flex; align-items: center; justify-content: center; transition: all .25s; padding: 0; }
.ra-carousel__arrow::before { content: ""; display: block; width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.ra-carousel__arrow:hover { background: var(--ra-noir); color: #fff; transform: translateY(-50%) scale(1.05); }
.ra-carousel__arrow--prev { left: 20px; }
.ra-carousel__arrow--prev::before { transform: rotate(-135deg); margin-left: 4px; }
.ra-carousel__arrow--next { right: 20px; }
.ra-carousel__arrow--next::before { transform: rotate(45deg); margin-right: 4px; }
.ra-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; align-items: center; }
.ra-carousel__dots button { width: 48px; height: 4px; border-radius: 2px; border: none; background: #e0e8ef; cursor: pointer; padding: 0; transition: all .35s; position: relative; overflow: hidden; }
.ra-carousel__dots button.active { background: var(--ra-noir); width: 80px; }
.ra-carousel__dots button.active::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(90deg, var(--ra-bleu), var(--ra-vert)); animation: ra-dot-progress 6s linear; }
@keyframes ra-dot-progress { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* Formulaire "Trouver un centre" (widget HTML, sur fond bleu) */
.ra-findcenter-form { background: #fff; padding: 10px; border-radius: 60px; box-shadow: 0 20px 50px rgba(0,0,0,.18); display: flex; align-items: center; gap: 8px; }
.ra-findcenter-form .input-wrap { flex: 1; display: flex; align-items: center; gap: 12px; padding: 8px 18px; }
.ra-findcenter-form .input-wrap svg { color: var(--ra-bleu); flex-shrink: 0; }
.ra-findcenter-form input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 15px; color: var(--ra-noir); background: transparent; font-weight: 500; box-shadow: none; padding: 0; }
.ra-findcenter-form input::placeholder { color: #a8b5cc; font-weight: 400; }
.ra-findcenter-form button { background: var(--ra-noir); color: #fff; border: none; padding: 14px 26px; border-radius: 50px; font-family: var(--ra-font); font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .25s; }
.ra-findcenter-form button:hover { background: var(--ra-rouge); }
/* Résultat de la recherche par code postal (injecté par JS) et lignes de tableau masquées par le filtre. */
.ra-centre-search-result { font-size: 15px; font-weight: 600; color: var(--ra-bleu); margin: 18px 0 0; text-align: center; }
tr.ra-hide, table.ra-hide { display: none !important; }
.ra-el-narrow { max-width: 480px; width: 100%; margin: 0 auto; }

/* Badge date d'évènement (widget HTML) */
.ra-event-date { background: linear-gradient(135deg, var(--ra-bleu), var(--ra-bleu-fonce)); color: #fff; padding: 12px 14px; text-align: center; min-width: 68px; max-width: 80px; border-radius: 10px; box-shadow: 0 4px 12px rgba(49,165,227,.3); }
.ra-event-date .d { font-size: 26px; font-weight: 700; line-height: 1; }
.ra-event-date .m { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; margin-top: 3px; }

/* Carte du réseau (widget HTML) */
.ra-map { background: linear-gradient(135deg, #f7fafc, #eaf6fc); aspect-ratio: 3/4; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 12px 40px rgba(31,127,184,.08); position: relative; overflow: hidden; }
.ra-map img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 20px; }
.ra-map__badge { position: absolute; top: 20px; left: 20px; background: #fff; padding: 10px 16px; border-radius: 30px; font-weight: 700; font-size: 14px; color: var(--ra-bleu); box-shadow: 0 6px 20px rgba(0,0,0,.1); display: flex; align-items: center; gap: 8px; z-index: 2; }
.ra-map__badge::before { content: ""; width: 8px; height: 8px; background: var(--ra-rouge); border-radius: 50%; box-shadow: 0 0 0 4px rgba(233,37,11,.18); }
.ra-map__cta { position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); padding: 14px 18px; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 2; }
.ra-map__cta .label { font-size: 14px; color: var(--ra-gris-txt); }
.ra-map__cta .label strong { display: block; color: var(--ra-noir); font-weight: 700; font-size: 14px; }
.ra-map__cta a { background: var(--ra-noir); color: #fff !important; padding: 8px 14px; border-radius: 30px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: background .2s; white-space: nowrap; }
.ra-map__cta a:hover { background: var(--ra-rouge); text-decoration: none; }

/* Personne (témoignage, widget HTML) */
.ra-person { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--ra-gris-bord); }
.ra-person__avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--ra-bleu), var(--ra-vert)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.ra-person__avatar--2 { background: linear-gradient(135deg, var(--ra-vert), #7c5cc6); }
.ra-person__avatar--3 { background: linear-gradient(135deg, var(--ra-rouge), var(--ra-orange)); }
.ra-person__nom { font-weight: 700; color: var(--ra-noir); font-size: 15px; letter-spacing: -.01em; }
.ra-person__role { font-size: 14px; color: var(--ra-gris-muted); margin-top: 2px; }

/* Grille vidéos (widget HTML) */
.ra-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ra-video { position: relative; overflow: hidden; aspect-ratio: 16/9; background: linear-gradient(135deg, #1f7fb8, #31A5E3); display: flex; align-items: flex-end; color: #fff !important; cursor: pointer; transition: all .35s cubic-bezier(.2,.8,.2,1); border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(31,127,184,.12); text-decoration: none !important; }
.ra-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ra-video:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 20px 40px rgba(31,127,184,.2); }
.ra-video::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 68px; background: rgba(233,37,11,.95); border-radius: 50%; box-shadow: 0 8px 24px rgba(233,37,11,.4); transition: transform .25s; }
.ra-video::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%,-50%); border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; z-index: 3; }
.ra-video:hover::after { transform: translate(-50%,-50%) scale(1.1); }
.ra-video .title { position: relative; z-index: 2; padding: 20px; font-weight: 600; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); width: 100%; font-size: 14px; }

/* Newsletter (widget HTML : icône + formulaire) */
.ra-ico-big { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--ra-bleu), var(--ra-bleu-fonce)); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 12px 28px rgba(49,165,227,.3); }
.ra-newsletter-form .field { background: #fff; padding: 8px; border-radius: 50px; display: flex; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.06); margin-bottom: 14px; }
.ra-newsletter-form input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 14px; padding: 10px 16px; background: transparent; color: var(--ra-noir); box-shadow: none; }
.ra-newsletter-form input::placeholder { color: #a8b5cc; }
.ra-newsletter-form button { background: var(--ra-rouge); color: #fff; border: none; padding: 12px 22px; border-radius: 50px; font-family: var(--ra-font); font-weight: 600; font-size: 14px; cursor: pointer; transition: all .25s; display: flex; align-items: center; gap: 6px; }
.ra-newsletter-form button:hover { background: var(--ra-rouge-hover); }
.ra-newsletter-form .legal { font-size: 14px; color: var(--ra-gris-muted); text-align: left; line-height: 1.5; margin: 0; }
.ra-newsletter-form .legal a { color: var(--ra-bleu); }
/* Honeypot anti-spam : présent dans le DOM (un vrai robot le remplit), invisible pour un humain — masqué
   hors écran plutôt qu'en display:none, que certains robots savent détecter et ignorer. */
.ra-newsletter-form .ra-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ra-newsletter-msg { font-size: 14px; font-weight: 600; margin: 0 0 10px; min-height: 1em; }
.ra-newsletter-msg.is-success { color: var(--ra-vert); }
.ra-newsletter-msg.is-error { color: var(--ra-rouge); }

/* ---------- 4. Compatibilité Elementor (widgets natifs) ---------- */
/* Règle : cibler .elementor-widget.<classe> … (DOM optimisé, prime sur le Kit). */

/* Titres de section */
.elementor-widget.ra-el-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 8px; color: var(--ra-orange); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; }
.elementor-widget.ra-el-eyebrow .elementor-heading-title::before, .elementor-widget.ra-el-eyebrow .elementor-heading-title::after { content: ""; width: 24px; height: 2px; background: var(--ra-orange); border-radius: 1px; }
.elementor-widget.ra-el-eyebrow.is-vert .elementor-heading-title { color: var(--ra-vert); }
.elementor-widget.ra-el-eyebrow.is-vert .elementor-heading-title::before, .elementor-widget.ra-el-eyebrow.is-vert .elementor-heading-title::after { background: var(--ra-vert); }
.elementor-widget.ra-el-eyebrow.is-blanc .elementor-heading-title { color: rgba(255,255,255,.85); }
.elementor-widget.ra-el-eyebrow.is-blanc .elementor-heading-title::before { background: rgba(255,255,255,.5); }
.elementor-widget.ra-el-eyebrow.is-blanc .elementor-heading-title::after { display: none; }

/* Images des cartes actualités (grille "La vie du Réseau Amylose") : les visuels sources ont des
   proportions très différentes (affiches de congrès très larges, illustrations plus carrées), ce qui
   donnait des cartes de hauteurs inégales — recadrage uniforme en 16:10. */
/* Certains articles n'ont pas d'image mise en avant (vérifié : "RCP nationale amylose cardiaque 2026",
   "Étude AG10 (ACT-EARLY)", "CAP'TEN HEAR 2025", etc.) — sans image du tout, ce cadre s'effondre à
   hauteur nulle et raccourcit toute la carte (et toute la ligne de la grille si ses voisines sont dans
   le même cas). Le même ratio 16:10 posé sur le cadre lui-même (pas seulement sur l'image) réserve la
   bonne hauteur même quand il n'y a pas d'image à afficher. */
.ra-el-loop-img { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--ra-gris-clair); }
.ra-el-loop-img img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; display: block; }

/* Ligne de date sur les cartes actualités : certains articles n'ont pas de date d'événement et
   n'affichent donc aucun texte ici (voir reseau-amylose-agenda.php). Sans hauteur réservée, ces
   cartes deviennent plus courtes que leurs voisines dans la grille et cassent l'alignement des
   lignes (effet "tetris"). Une hauteur minimale garde toutes les cartes de même hauteur, qu'il y ait
   une date affichée ou non. */
.ra-el-eyebrow-date { min-height: 26px; }
.ra-el-eyebrow-date .elementor-heading-title:has(.ra-eyebrow-empty)::before,
.ra-el-eyebrow-date .elementor-heading-title:has(.ra-eyebrow-empty)::after { display: none; }

/* Cartes actualités : toutes la même hauteur, quelle que soit la longueur du titre ou la présence
   d'une date — le corps de carte (date + titre + bouton) s'étire pour remplir tout l'espace laissé
   par la grille (déjà à hauteur égale entre cartes d'une même ligne), et le bouton "Lire l'article"
   reste systématiquement collé en bas. */
.elementor-loop-container .ra-el-card-body { flex: 1 1 auto; min-height: 220px; padding-bottom: 18px; }
/* Titre et extrait ont maintenant chacun une hauteur fixe (voir plus bas), donc plus besoin de pousser
   le bouton en bas avec une marge automatique qui variait selon le vide restant — un simple espacement
   fixe suffit et évite l'écart trop généreux constaté avec l'automatique. */
.elementor-loop-container .ra-el-more { margin-top: 6px; }
/* Filet de sécurité final : hauteur minimale sur la carte entière (image + corps), pour le cas où le
   widget image lui-même est totalement absent du HTML (aucune image mise en avant sur l'article — ça
   n'est pas juste une image vide, Elementor ne rend alors aucun cadre du tout à réserver en CSS).
   Resserrée au minimum réellement nécessaire (mesuré), pas une valeur ronde arbitraire. */
.elementor-loop-container .ra-el-card-outer { min-height: 616px; }
/* Extrait sous le titre : longueur de texte variable d'un article à l'autre (une phrase courte vs.
   plusieurs), ce qui rendait les cartes de nouveau inégales une fois l'extrait ajouté. Toujours
   exactement 2 lignes de haut (réduit de 3 à 2 pour resserrer la carte) — tronqué (…) si le texte est
   plus long, complété par du vide sinon — plutôt que de dépendre de la hauteur naturelle du texte. */
.elementor-loop-container .ra-el-small,
.elementor-loop-container .ra-el-small p {
	min-height: calc(1.6em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 8px !important;
}
/* Titre des cartes : 1 ou 2 lignes selon sa longueur, ce qui décalait encore certaines cartes de la
   hauteur d'une ligne (~26px) malgré le reste déjà fixé. Toujours exactement 2 lignes de haut. */
.elementor-loop-container .elementor-widget-theme-post-title .elementor-heading-title {
	min-height: 2.4em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.elementor-widget.ra-el-h2 .elementor-heading-title { font-family: var(--ra-font); color: var(--ra-noir); font-size: 40px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.elementor-widget.ra-el-h2.is-blanc .elementor-heading-title { color: #fff; font-size: 34px; }
.elementor-widget.ra-el-h2.is-30 .elementor-heading-title { font-size: 30px; }
.elementor-widget.ra-el-intro, .elementor-widget.ra-el-intro p { font-size: 17px; color: var(--ra-gris-muted); line-height: 1.6; }
.elementor-widget.ra-el-intro { max-width: 560px; margin-left: auto; margin-right: auto; }
.elementor-widget.ra-el-intro p { margin: 0; }

/* Textes */
.elementor-widget.ra-el-lead, .elementor-widget.ra-el-lead p { font-size: 17px; color: var(--ra-gris-txt); line-height: 1.7; }
.elementor-widget.ra-el-lead p { margin: 0; }
.elementor-widget.ra-el-text, .elementor-widget.ra-el-text p { font-size: 16px; color: var(--ra-gris-txt); line-height: 1.65; }
.elementor-widget.ra-el-text p { margin: 0; }
.elementor-widget.ra-el-text.is-blanc, .elementor-widget.ra-el-text.is-blanc p { color: rgba(255,255,255,.85); }
.elementor-widget.ra-el-small, .elementor-widget.ra-el-small p { font-size: 14px; color: var(--ra-gris-txt); line-height: 1.6; }
.elementor-widget.ra-el-small p { margin: 0; }
.elementor-widget.ra-el-muted, .elementor-widget.ra-el-muted p { font-size: 14px; color: #888; line-height: 1.5; }
.elementor-widget.ra-el-muted p { margin: 0; }

/* Liste à coches (réseau) */
.elementor-widget.ra-el-checklist ul { list-style: none; margin: 0; padding: 0; }
.elementor-widget.ra-el-checklist li { padding: 14px 0 14px 38px; border-bottom: 1px solid var(--ra-gris-bord); font-size: 15px; position: relative; color: var(--ra-gris-txt); }
.elementor-widget.ra-el-checklist li:last-child { border-bottom: none; }
.elementor-widget.ra-el-checklist li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: rgba(27,187,155,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231BBB9B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* Boutons natifs */
.elementor-widget.ra-el-btn .elementor-button { font-family: var(--ra-font); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: .6px; padding: 14px 26px; border-radius: 4px; transition: all .2s; }
.elementor-widget.ra-el-btn-bleu .elementor-button { background: var(--ra-bleu); color: #fff; }
.elementor-widget.ra-el-btn-bleu .elementor-button:hover { background: var(--ra-bleu-fonce); }
.elementor-widget.ra-el-btn-rouge .elementor-button { background: var(--ra-rouge); color: #fff; }
.elementor-widget.ra-el-btn-rouge .elementor-button:hover { background: var(--ra-rouge-hover); }
.elementor-widget.ra-el-btn-outline .elementor-button { background: transparent; color: var(--ra-bleu); border: 2px solid var(--ra-bleu); }
.elementor-widget.ra-el-btn-outline .elementor-button:hover { background: var(--ra-bleu); color: #fff; }
/* Lien "En savoir plus →" (rouge, sans fond) */
.elementor-widget.ra-el-more .elementor-button { background: transparent; color: var(--ra-rouge); padding: 0; font-size: 14px; font-weight: 600; border: none; border-radius: 0; text-transform: none; letter-spacing: 0; }
.elementor-widget.ra-el-more .elementor-button:hover { color: var(--ra-rouge-hover); gap: 12px; }
.elementor-widget.ra-el-more.is-upper .elementor-button { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; }
.elementor-widget.ra-el-more.is-upper-12 .elementor-button { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }

/* Cartes actualités : média (image + badge) en widget HTML, déborde du padding 26px de la colonne */
.ra-card-media { position: relative; height: 220px; overflow: hidden; border-radius: 16px 16px 0 0; margin: -26px -26px 0; background: #eaf6fc; }
.ra-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.elementor-column:hover .ra-card-media img { transform: scale(1.06); }
.ra-card-media .ra-badge { top: 16px; left: 16px; font-size: 13px; padding: 7px 14px; }
.ra-card-media .ra-badge::before { animation: none; }
.elementor-widget.ra-el-date, .elementor-widget.ra-el-date p { font-size: 14px; color: var(--ra-gris-muted); font-weight: 500; }
.elementor-widget.ra-el-date p { margin: 0; }
.elementor-widget.ra-el-h3 .elementor-heading-title { font-family: var(--ra-font); color: var(--ra-noir); font-size: 19px; line-height: 1.35; font-weight: 700; letter-spacing: -.015em; }
.elementor-widget.ra-el-h4 .elementor-heading-title { font-family: var(--ra-font); font-size: 16px; color: var(--ra-bleu); font-weight: 600; }

/* Témoignages : guillemet + citation */
.elementor-widget.ra-el-quote::before { content: ""; display: block; width: 36px; height: 36px; margin-bottom: 14px; opacity: .35; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2331A5E3'%3E%3Cpath d='M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z'/%3E%3C/svg%3E") center / contain no-repeat; }
.elementor-widget.ra-el-quote, .elementor-widget.ra-el-quote p { font-size: 16px; line-height: 1.65; color: var(--ra-noir); font-weight: 500; }
.elementor-widget.ra-el-quote p { margin: 0; }

/* Colonnes-cartes : ombre douce + survol (les fonds/rayons sont des réglages natifs) */
.elementor-column.ra-card-col > .elementor-widget-wrap, .ra-card-col > .elementor-widget-wrap { transition: all .35s cubic-bezier(.2,.8,.2,1); }
.elementor-section.ra-cards .elementor-column > .elementor-widget-wrap { box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(31,127,184,.07); transition: all .35s cubic-bezier(.2,.8,.2,1); }
.elementor-section.ra-cards .elementor-column > .elementor-widget-wrap:hover { transform: translateY(-6px); box-shadow: 0 4px 8px rgba(0,0,0,.05), 0 24px 48px rgba(31,127,184,.16); }

/* Largeur "large" pour les sections pleine largeur (carrousel) */
.elementor-widget.ra-el-wide { max-width: var(--ra-wide); margin-left: auto; margin-right: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.ra-slide { grid-template-columns: 1fr; min-height: auto; }
	.ra-slide__visual { aspect-ratio: 16/9; order: -1; }
	.ra-slide__text { padding: 36px 28px; }
	.ra-slide__title { font-size: 28px; }
	.ra-entrees { grid-template-columns: repeat(2, 1fr); }
	.ra-footer__cols { grid-template-columns: 1fr 1fr; }
	.ra-tel { display: none; }
	.ra-videos { grid-template-columns: repeat(2, 1fr); }
	.ra-findcenter-form { flex-direction: column; border-radius: 18px; }
	.ra-findcenter-form .input-wrap { width: 100%; }
	.ra-findcenter-form button { width: 100%; justify-content: center; }
	.elementor-widget.ra-el-h2 .elementor-heading-title { font-size: 28px; }
}
@media (max-width: 600px) {
	.ra-entrees { grid-template-columns: 1fr; }
	.ra-footer__cols { grid-template-columns: 1fr; }
	.ra-videos { grid-template-columns: 1fr; }
	.ra-slide__title { font-size: 24px; }
	.ra-carousel__arrow { display: none; } /* les points suffisent sur mobile, les flèches chevauchaient le titre */
	.ra-logo img { height: 40px; }
}

/* Écrans tactiles (pas de survol) : les sous-menus s'affichent empilés sous la rubrique (accordéon,
   ouvert au 1er appui via main.js) plutôt qu'en carte flottante — une carte de 280px ou un 3e niveau
   ouvert "à droite" (left:100%, pensé pour le survol sur grand écran) déborderait de l'écran. */
@media (hover: none), (pointer: coarse) {
	.ra-entrees > li {
		flex-direction: column;
		align-items: stretch;
	}
	.ra-entrees .sub-menu {
		position: static;
		top: auto; left: auto; margin-left: 0;
		min-width: 0;
		box-shadow: none;
		border-radius: 0;
		transform: none;
		max-height: 0;
		visibility: hidden;
		overflow: hidden;
		padding: 0 0 0 14px;
		transition: max-height .25s ease;
	}
	.ra-entrees li.is-open > .sub-menu {
		visibility: visible;
		max-height: 2000px;
		padding: 6px 0 6px 14px;
	}
	.ra-entrees .sub-menu .sub-menu { padding-left: 14px; }
}

/* === Annuaire (centres experts / conseillers en génétique) : recherche + filtre + fiches + carte === */
.ra-annuaire {
	max-width: 1200px;
	margin: 0 auto 40px;
	padding: 0 20px;
}
.ra-annuaire-panel {
	background: linear-gradient(135deg, #EAF6FD 0%, #F4FAFD 100%);
	border: 1px solid #D7ECF7;
	border-radius: 24px;
	padding: 32px clamp(20px, 5vw, 44px);
	margin-bottom: 24px;
	text-align: center;
}
.ra-annuaire-panel h2 {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	color: #1F3A5F;
	margin: 0 0 6px;
}
.ra-annuaire-count {
	display: inline-block;
	font-size: 14px;
	color: #1F3A5F;
	background: #fff;
	border: 1px solid #D7ECF7;
	border-radius: 999px;
	padding: 4px 14px;
	margin: 0 0 24px;
}
.ra-annuaire-count-num {
	font-weight: 800;
	color: #31A5E3;
}
.ra-annuaire-controls {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	max-width: 720px;
	margin: 0 auto;
}
.ra-annuaire-search-wrap,
.ra-annuaire-region-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.ra-annuaire-search-wrap { flex: 1 1 320px; }
.ra-annuaire-region-wrap { flex: 0 1 230px; }
.ra-annuaire-search-wrap svg,
.ra-annuaire-region-wrap svg {
	position: absolute;
	left: 18px;
	color: #94A3B8;
	pointer-events: none;
}
.ra-annuaire-search {
	width: 100%;
	padding: 16px 20px 16px 50px;
	border: none;
	border-radius: 14px;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 16px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(15, 40, 70, 0.08);
	transition: box-shadow 0.15s ease;
}
.ra-annuaire-search:focus {
	outline: none;
	box-shadow: 0 6px 18px rgba(15, 40, 70, 0.08), 0 0 0 3px rgba(49, 165, 227, 0.3);
}
.ra-annuaire-region {
	width: 100%;
	padding: 16px 20px 16px 48px;
	border: none;
	border-radius: 14px;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 15px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(15, 40, 70, 0.08);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.ra-annuaire-region-wrap::after {
	content: "";
	position: absolute;
	right: 18px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #94A3B8;
	border-bottom: 2px solid #94A3B8;
	transform: rotate(45deg);
	pointer-events: none;
}
.ra-annuaire-layout {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	gap: 20px;
	align-items: start;
}
@media (max-width: 560px) {
	.ra-annuaire-controls { flex-direction: column; }
	.ra-annuaire-search-wrap, .ra-annuaire-region-wrap { flex: 1 1 auto; }
}
.ra-annuaire-results {
	max-height: 560px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-right: 4px;
}
.ra-annuaire-card {
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	padding: 16px 18px;
	background: #fff;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ra-annuaire-card:hover {
	border-color: #31A5E3;
	box-shadow: 0 8px 20px rgba(15, 40, 70, 0.08);
}
.ra-annuaire-card h3 {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #1F3A5F;
	margin: 0 0 4px;
}
.ra-annuaire-card__etab {
	font-size: 13px;
	color: #31A5E3;
	font-weight: 600;
	margin: 0 0 4px;
}
.ra-annuaire-card__addr {
	font-size: 13px;
	color: #64748B;
	margin: 0 0 6px;
	line-height: 1.5;
}
.ra-annuaire-card__tel {
	font-size: 13px;
	color: #1F3A5F;
	margin: 0 0 6px;
}
.ra-annuaire-card__meta {
	font-size: 13px;
	color: #1F3A5F;
	margin: 0 0 4px;
	line-height: 1.5;
}
.ra-annuaire-card__meta strong { color: #64748B; font-weight: 600; }
.ra-annuaire-card__link {
	font-size: 13px;
	color: #1BBB9B;
	font-weight: 600;
	text-decoration: none;
}
.ra-annuaire-card__link:hover { text-decoration: underline; }
.ra-annuaire-empty {
	padding: 24px;
	text-align: center;
	color: #64748B;
	font-size: 14px;
}
.ra-map {
	width: 100%;
	height: 560px;
	border-radius: 20px;
	box-shadow: 0 20px 45px rgba(15, 40, 70, 0.12);
	z-index: 1;
}
.ra-map .leaflet-popup-content { font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) {
	.ra-annuaire-layout { grid-template-columns: 1fr; }
	.ra-annuaire-results { max-height: 420px; order: 2; }
	.ra-map { height: 360px; order: 1; }
}

/* === Recherche live dans un tableau (publications) === */
.ra-pub-search {
	max-width: 1200px;
	margin: 0 auto 20px;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.ra-pub-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 360px;
}
.ra-pub-search-wrap svg {
	position: absolute;
	left: 18px;
	color: #94A3B8;
	pointer-events: none;
}
.ra-pub-search-wrap input {
	width: 100%;
	padding: 16px 20px 16px 50px;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 16px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(15, 40, 70, 0.06);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ra-pub-search-wrap input:focus {
	outline: none;
	border-color: #31A5E3;
	box-shadow: 0 6px 18px rgba(15, 40, 70, 0.06), 0 0 0 3px rgba(49, 165, 227, 0.2);
}
.ra-pub-search-count {
	font-size: 14px;
	color: #64748B;
	white-space: nowrap;
	margin: 0;
}
.ra-pub-search-count-num,
#ra-pub-search-count-num {
	font-weight: 800;
	color: #31A5E3;
}

/* Tableau des publications : défilement horizontal propre + lisibilité */
.elementor-widget-text-editor:has(#ra-pub-table) .elementor-widget-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	overflow-x: auto;
}
#ra-pub-table {
	width: 100%;
	border-collapse: collapse;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 14px;
}
#ra-pub-table tr:first-child td {
	background: #1F3A5F;
	color: #fff;
	font-weight: 700;
	position: sticky;
	top: 0;
	z-index: 1;
}
#ra-pub-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #E2E8F0;
	vertical-align: top;
	line-height: 1.5;
}
#ra-pub-table tr:not(:first-child):hover td { background: #F4FAFD; }
#ra-pub-table tr:not(:first-child):nth-child(even) td { background: #FAFBFC; }
#ra-pub-table tr:not(:first-child):nth-child(even):hover td { background: #F4FAFD; }
#ra-pub-table a { color: #1BBB9B; font-weight: 600; }