@charset "UTF-8";
/* ==========================================================================
   CIVERP38 — pont entre le design system (civ38.css) et le balisage Elementor.
   À charger APRÈS civ38.css.

   Principe : l'identité graphique est portée par les classes .civ-*, pas par
   les réglages Elementor. Si Elementor ignore un réglage à l'import, la page
   reste conforme à la charte.
   ========================================================================== */

/* Un conteneur portant .civ-sec / .civ-band se comporte comme une section :
   pleine largeur au dehors, contenu centré et en flux normal au dedans. */
.elementor .civ-sec,
.elementor .civ-band,
.elementor .civ-hero{
  display:block;width:100%;max-width:none;
}
/* Elementor pose padding-block:0 sur .e-con. Sans spécificité supérieure, les
   sections perdraient leur respiration si la charte était chargée avant lui. */
.elementor .civ-sec{padding-block:var(--civ-sec-y)}
.elementor .civ-band{padding-block:clamp(30px,4.4vw,52px)}
/* Variante encre : le bandeau garde sa fonction de respiration entre deux
   sections, mais la rampe s'y réduit à un filet de 4 px en tête — le même
   rappel qu'au pied de page. Utilisée sur les pages dont le hero porte déjà la
   rampe, pour qu'il n'y ait jamais deux grandes surfaces dégradées à la suite. */
.elementor .civ-band--encre{background-color:var(--civ-ink);background-image:none}
.elementor .civ-band--encre::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:2;
  background:var(--civ-ramp-h);opacity:1;
}
.elementor .civ-band--encre::after{background:none}
.elementor .civ-hero{padding-block:0}
.elementor .civ-sec > .e-con-inner,
.elementor .civ-band > .e-con-inner,
.elementor .civ-hero > .e-con-inner{
  display:block;width:100%;
  max-width:var(--civ-wrap);
  margin-inline:auto;
  padding:0 var(--civ-gut);
}

/* Elementor gère l'espacement par un gap flex ; en flux normal on le remplace. */
.elementor .civ-sec > .e-con-inner > .elementor-element + .elementor-element,
.elementor .civ-band > .e-con-inner > .elementor-element + .elementor-element{
  margin-top:clamp(18px,2.4vw,28px);
}

/* Les widgets Elementor n'ajoutent aucune marge parasite dans nos blocs. */
.elementor .civ-sec .elementor-widget-container > :first-child{margin-top:0}
.elementor .civ-sec .elementor-widget-container > :last-child{margin-bottom:0}
.elementor .civ-sec .elementor-widget-html .civ-feats,
.elementor .civ-sec .elementor-widget-html .civ-prices,
.elementor .civ-sec .elementor-widget-html .civ-info,
.elementor .civ-sec .elementor-widget-html .civ-faq{margin:0}

/* --------------------------------------------------------------------------
   BLINDAGE DES TITRES (constaté en production le 04/09/2026)
   Elementor écrit sa typographie de kit sous la forme « .elementor-kit-42 h3 »,
   et le thème peut faire de même avec « .entry-content h3 ». Ces sélecteurs
   valent (0,1,1) et l'emportent donc sur nos classes en (0,1,0) : les titres de
   cartes et de blocs picto passaient au blanc cassé, presque illisibles, alors
   que les paragraphes voisins restaient corrects.
   On réaffirme la couleur au niveau (0,2,1), qui gagne sans recourir à
   !important — et qui protège aussi les widgets natifs ajoutés depuis.
   -------------------------------------------------------------------------- */
.elementor .civ-sec h1,.elementor .civ-sec h2,
.elementor .civ-sec h3,.elementor .civ-sec h4,
.elementor .civ-hero h3,.elementor .civ-hero h4{color:var(--civ-ink)}
.elementor .civ-sec--dark h1,.elementor .civ-sec--dark h2,
.elementor .civ-sec--dark h3,.elementor .civ-sec--dark h4,
.elementor .civ-hero h1,.elementor .civ-hero h2{color:#fff}
.elementor .civ-band h1,.elementor .civ-band h2,
.elementor .civ-band h3,.elementor .civ-band p{color:#fff}
/* Les sur-titres des blocs d'information gardent leur teinte propre. */
.elementor .civ-sec .civ-info__h h3{color:var(--civ-ink)}
.elementor .civ-sec--dark .civ-info__h h3{color:var(--civ-on-ramp-soft)}
.elementor .civ-sec .civ-foot h2,.elementor .civ-sec .civ-foot h3{color:#fff}

/* Même famille de conflit, sur les pictogrammes : nos SVG portent l'attribut
   fill="none", mais une règle CSS du thème ou d'Elementor du type « svg{fill:…} »
   l'emporte sur un attribut de présentation. Les pictos en trait devenaient des
   taches blanches pleines. On réaffirme le tracé. */
.elementor .civ-pastille svg,.elementor .civ-ico,
.elementor .civ-arcs,.elementor .civ-rings{fill:none}
.elementor .civ-pastille svg{stroke:currentColor}

/* --------------------------------------------------------------------------
   Widget Titre. Elementor place la classe personnalisée sur l'enveloppe
   .elementor-element et impose sa propre couleur et son interligne sur
   .elementor-heading-title : il faut donc viser le descendant.
   -------------------------------------------------------------------------- */
.elementor .civ-kicker{margin-bottom:.7rem}
.elementor .civ-kicker .elementor-heading-title{
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;line-height:1.2;
}

/* La typographie vaut pour toutes les variantes de titre de section, le filet
   seulement pour celles qui le demandent : depuis le 05/09/2026 un titre peut
   sortir sans filet et sans sur-titre, pour que les cinq sections d'une page
   n'aient plus exactement la même silhouette. */
[class*="civ-h2--"],[class*="civ-h1--"]{
  font-family:var(--civ-font-title);font-weight:800;letter-spacing:-.02em;line-height:1.1;
}
[class*="civ-h2--"]{font-size:clamp(1.7rem,3.6vw,2.6rem)}
[class*="civ-h1--"]{font-size:clamp(2rem,4.6vw,3.1rem);text-transform:none}
.elementor [class*="civ-h2--"] .elementor-heading-title,
.elementor [class*="civ-h1--"] .elementor-heading-title{
  color:inherit;font:inherit;letter-spacing:inherit;line-height:1.1;
}

/* Motif 1 : le filet de 60 × 2,5 px est porté par le titre, sans widget dédié. */
[class*="civ-h2--rule"]::after,
[class*="civ-h1--rule"]::after{
  content:"";display:block;width:60px;height:2.5px;border-radius:2px;
  margin-top:1.1rem;background:var(--civ-magenta);
}
.civ-h2--rule-orange::after,.civ-h1--rule-orange::after{background:var(--civ-orange)}
.civ-h2--rule-violet::after,.civ-h1--rule-violet::after{background:var(--civ-violet)}
.civ-h2--rule-light::after,.civ-h1--rule-light::after{background:var(--civ-on-ramp-soft)}

/* Couleur des titres selon le fond de section. */
.elementor .civ-sec--cream [class*="civ-h2--"],
.elementor .civ-sec--cream [class*="civ-h1--"],
.elementor .civ-sec--warm [class*="civ-h2--"],
.elementor .civ-sec--warm [class*="civ-h1--"]{color:var(--civ-ink)}
.elementor .civ-sec--dark [class*="civ-h2--"],
.elementor .civ-sec--dark [class*="civ-h1--"]{color:#fff}
.elementor .civ-sec--dark .civ-kicker{color:var(--civ-on-ramp-soft)}

/* Bandeau (motif 7) : titre et sous-titre en blanc, par-dessus le dégradé. */
.elementor .civ-band__t{color:#fff}
.elementor .civ-band__t .elementor-heading-title{
  color:#fff;font:inherit;letter-spacing:inherit;line-height:1.12;text-transform:inherit;
}
.elementor .civ-band .elementor-widget-text-editor,
.elementor .civ-band .elementor-widget-text-editor p{color:#fff}

/* Le widget Éditeur de texte hérite du corps de texte de la charte. */
.elementor .civ-sec .elementor-widget-text-editor{
  font-size:1rem;line-height:1.55;color:var(--civ-text);
}
.elementor .civ-sec--dark .elementor-widget-text-editor{color:var(--civ-on-dark-2)}
.elementor .civ-band .elementor-widget-text-editor{color:#fff}

/* Le widget Bouton reprend la pilule de la charte.
   Aplati le 05/09/2026, même raison que les pastilles : un bouton dégradé avec
   une ombre colorée est le deuxième marqueur des pages fabriquées à la chaîne.
   Magenta uni, ombre neutre et discrète. Le blanc sur #E5007E donne 4,53:1. */
.elementor .civ-sec .elementor-button,
.elementor .civ-band .elementor-button,
.elementor .civ-hero .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;min-height:48px;padding:12px 26px;line-height:1.2;
  font-family:var(--civ-font-title);font-weight:800;font-size:1rem;
  background-color:var(--civ-magenta);background-image:none;
  color:#fff;fill:#fff;border:0;text-decoration:none;
  box-shadow:0 1px 2px rgba(26,12,46,.14);
}
.elementor .civ-sec .elementor-button:hover,
.elementor .civ-sec .elementor-button:focus{
  color:#fff;background-color:#C1006A;box-shadow:0 2px 6px rgba(26,12,46,.20);
}
.elementor .civ-sec .elementor-button .elementor-button-text{color:#fff}

/* Décor (motif 6) : Elementor positionne chaque widget en relative, ce qui
   emprisonnerait le décor. On le remet en flux statique pour qu'il se cale sur
   la section. */
.elementor .civ-decor,
.elementor .civ-decor > .elementor-widget-container{position:static;margin:0}

/* Le bandeau Elementor doit garder ses stries diagonales au-dessus du fond. */
.elementor .civ-band > .e-con-inner{position:relative;z-index:1}

/* Sur fond sombre, le halo radial reste derrière le contenu. */
.elementor .civ-sec--dark > .e-con-inner{position:relative;z-index:1}


/* ==========================================================================
   WIDGETS NATIFS — septembre 2026
   Les blocs de contenu ne sont plus des widgets HTML : ce sont des conteneurs
   Elementor remplis de widgets natifs (Titre, Éditeur de texte, Encadré
   d'image, Liste d'icônes, Image, Bouton). Le club modifie donc un tarif, un
   horaire ou une question au clic. La contrepartie est ici : c'est le CSS qui
   redonne à ces widgets l'habillage de la charte, et qui rétablit ce que
   « .e-con » remet à zéro (padding, fond, mise en page).
   ========================================================================== */

/* Un conteneur imbriqué de la charte se comporte comme un bloc, pas comme une
   colonne flex : c'est le CSS de la charte qui décide de sa mise en page. */
.elementor .civ-fbs,.elementor .civ-info,.elementor .civ-prices,
.elementor .civ-price,.elementor .civ-card,.elementor .civ-callout,
.elementor .civ-partners,.elementor .civ-partner,.elementor .civ-partner__txt,
.elementor .civ-qa-list,.elementor .civ-qa,.elementor .civ-cols,
.elementor .civ-info__c,.elementor .civ-hero__ink,.elementor .civ-hero__cta{
  display:block;width:100%;max-width:none;
  padding:0;--padding-block:0;--padding-inline:0;
}
/* Espacement vertical entre widgets d'un même bloc (le gap flex ne s'applique
   plus en flux normal). */
.elementor .civ-price > .elementor-element + .elementor-element,
.elementor .civ-card > .elementor-element + .elementor-element,
.elementor .civ-callout > .elementor-element + .elementor-element,
.elementor .civ-info__c > .elementor-element + .elementor-element,
.elementor .civ-partner__txt > .elementor-element + .elementor-element,
.elementor .civ-hero__ink > .elementor-element + .elementor-element{
  margin-top:.7rem;
}

/* ---------- Motif 3 : picto + titre + texte (Encadré d'image) ------------ */
.elementor .civ-fbs{display:grid;gap:22px 30px;grid-template-columns:1fr}
/* Seuils relevés le 04/09/2026 après mesure sur tablette (753 px de large) :
   à trois colonnes, la colonne de texte d'un « Encadré d'image » ne faisait plus
   que 208 px, soit deux à trois mots par ligne. On garde donc une seule colonne
   jusqu'à 980 px pour les grilles de trois — un bloc pleine largeur par ligne se
   lit bien mieux qu'une colonne de 208 px. */
@media (min-width:700px){.elementor .civ-fbs--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.elementor .civ-fbs--3{grid-template-columns:repeat(3,1fr)}}
.elementor .civ-fb .elementor-image-box-wrapper{
  display:flex;align-items:flex-start;gap:16px;text-align:left;
}
/* La pastille. Rayon = 28 % du côté, picto en trait blanc (fichier SVG, donc
   insensible au CSS du thème).

   Aplatie le 05/09/2026. Le dégradé par pastille était le trait le plus
   reconnaissable de la page : vingt-quatre petits carrés dégradés balayant la
   rampe orange → violet, c'est la signature des pages web fabriquées à la
   chaîne. La rampe reste la charte du flyer, mais elle est désormais réservée
   à deux moments — la carte du hero et le bandeau de section — au lieu d'être
   le bruit de fond de la page.
   Une couleur unie par SECTION, pas par élément : c'est ce qu'aurait fait un
   graphiste, et cela retire le balayage arc-en-ciel. */
.elementor .civ-fb .elementor-image-box-img{
  flex:0 0 auto;width:56px;height:56px;margin:0;
  border-radius:16px;
  background:var(--civ-pastille,var(--civ-magenta));
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(26,12,46,.12);
}
/* Elementor écrit, pour chaque widget « Encadré d'image », une règle par
   élément du type
     .elementor-149 .elementor-element.elementor-element-1bd4cce6
       .elementor-image-box-wrapper .elementor-image-box-img{width:30%}
   qui vaut (0,5,0) et l'emporte sur la règle ci-dessus, en (0,3,0). La pastille
   prenait donc 30 % de la colonne — 158 px de large pour 56 px de haut — et le
   picto, dimensionné en pourcentage de cette largeur, atteignait 92 px : il
   dépassait de 36 px sous la pastille. Constaté en ligne le 04/09/2026, et
   d'autant plus visible que la colonne est large, ce qui explique pourquoi les
   infos pratiques semblaient correctes et l'accueil non.
   On repasse devant en (0,6,0) — classe répétée, sans !important — et le picto
   passe en dimension absolue : il ne peut plus déborder même si la pastille
   s'échappait à nouveau. */
.elementor .elementor-widget-image-box.civ-fb .elementor-image-box-wrapper
  .elementor-image-box-img.elementor-image-box-img{
  width:56px;height:56px;flex:0 0 56px;
}
.elementor .civ-fb .elementor-image-box-img img{
  width:32px;height:32px;display:block;object-fit:contain;
}
.elementor .civ-fb .elementor-image-box-content{flex:1 1 auto}
.elementor .civ-fb .elementor-image-box-title{
  margin:0 0 .3rem;font-family:var(--civ-font-title);font-weight:700;
  font-size:1.08rem;line-height:1.25;letter-spacing:-.01em;
}
.elementor .civ-fb .elementor-image-box-description{
  margin:0;color:var(--civ-text-2);font-size:1rem;line-height:1.5;
}
.elementor .civ-sec--dark .civ-fb .elementor-image-box-description{color:var(--civ-on-dark-2)}
/* Variante réduite : en-tête de bloc d'information (pastille 44 px, sur-titre). */
.elementor .civ-fb--sm .elementor-image-box-img{width:44px;height:44px;border-radius:12px}
.elementor .civ-fb--sm .elementor-image-box-wrapper{align-items:center;gap:13px}
.elementor .civ-info__h .elementor-image-box-title{
  margin:0;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
}
.elementor .civ-info__h .elementor-image-box-description{display:none}
/* Repli pour le balisage déjà en ligne, tant que les pages ne sont pas
   réimportées : les anciennes classes par élément prennent toutes la même
   teinte. Le balayage arc-en-ciel disparaît donc dès le dépôt de la feuille,
   sans attendre le réimport — et aucune couleur nouvelle n'entre dans la
   charte. Après réimport, la teinte de section prend le relais. */
.civ-p0,.civ-p1,.civ-p2,.civ-p3,.civ-p4,
.civ-p5,.civ-p6,.civ-p7,.civ-p8{--civ-pastille:var(--civ-magenta)}

/* Une couleur par section, posée par le générateur — soit sur la grille, soit
   sur le bloc lui-même quand il est isolé (les trois blocs des infos
   pratiques). Les deux formes sont donc prévues. */
.civ-teinte--magenta .civ-fb .elementor-image-box-img,
.civ-fb.civ-teinte--magenta .elementor-image-box-img{--civ-pastille:#E5007E}
.civ-teinte--pourpre .civ-fb .elementor-image-box-img,
.civ-fb.civ-teinte--pourpre .elementor-image-box-img{--civ-pastille:#A81EC8}
.civ-teinte--violet .civ-fb .elementor-image-box-img,
.civ-fb.civ-teinte--violet .elementor-image-box-img{--civ-pastille:#7B2FF7}
.civ-teinte--encre .civ-fb .elementor-image-box-img,
.civ-fb.civ-teinte--encre .elementor-image-box-img{--civ-pastille:#341658}
/* Sur fond sombre, la pastille s'éclaircit au lieu de s'enfoncer. */
.civ-sec--dark .civ-teinte--encre .civ-fb .elementor-image-box-img{--civ-pastille:#A81EC8}

/* ---------- Blocs d'information (3 colonnes) ---------------------------- */
.elementor .civ-info{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:900px){.elementor .civ-info{grid-template-columns:repeat(3,1fr)}}

/* ---------- Deux colonnes génériques ------------------------------------ */
.elementor .civ-cols{display:grid;flex-direction:unset;gap:clamp(24px,3.4vw,40px);grid-template-columns:1fr}
@media (min-width:900px){.elementor .civ-cols--2{grid-template-columns:1fr 1fr}}

/* ---------- Cartes de tarifs -------------------------------------------- */
.elementor .civ-prices{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:700px){.elementor .civ-prices--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.elementor .civ-prices{grid-template-columns:repeat(3,1fr)}}
.elementor .civ-price{
  background:#fff;border-radius:var(--civ-r-m);box-shadow:var(--civ-shadow-m);
  padding:26px 24px 24px;border-top:4px solid var(--civ-orange);
}
.elementor .civ-prices > .civ-price:nth-child(2){border-top-color:var(--civ-magenta)}
.elementor .civ-prices > .civ-price:nth-child(3){border-top-color:var(--civ-violet)}
.elementor .civ-price--star{box-shadow:0 18px 46px rgba(229,0,126,.20)}
.elementor .civ-price__tag .elementor-heading-title{
  display:inline-block;background-image:var(--civ-ramp-btn);color:#fff;border-radius:999px;
  padding:6px 13px;font-family:var(--civ-font-title);font-weight:800;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;line-height:1.3;
}
.elementor .civ-price__n .elementor-heading-title{
  font-family:var(--civ-font-title);font-weight:800;font-size:1.16rem;letter-spacing:-.01em;
}
.elementor .civ-price__a p{
  margin:0;font-family:var(--civ-font-title);font-weight:800;color:var(--civ-ink);
  font-size:clamp(2.1rem,4.4vw,2.7rem);line-height:1;letter-spacing:-.03em;
}
.elementor .civ-price__a span{font-size:.42em;font-weight:700;color:var(--civ-text-2);letter-spacing:0}
.elementor .civ-price__s p{
  margin:0;color:var(--civ-text);font-size:1rem;font-weight:600;
  padding-left:11px;border-left:3px solid var(--civ-magenta);
}
.elementor .civ-price__d p{margin:0;color:var(--civ-text-2);font-size:1rem}
.elementor .civ-price > .civ-price__a{margin-top:.35rem}

/* ---------- Listes (Liste d'icônes) ------------------------------------- */
.elementor .civ-list .elementor-icon-list-items{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.elementor .civ-list .elementor-icon-list-icon{display:none}
.elementor .civ-list .elementor-icon-list-item{align-items:flex-start;margin:0;padding:0}
.elementor .civ-list .elementor-icon-list-item a{display:block}
/* Puce « coche » de la charte, sur les listes d'inclus. */
.elementor .civ-price__l .elementor-icon-list-text{
  position:relative;padding-left:24px;color:var(--civ-text);font-size:1rem;line-height:1.45;
}
.elementor .civ-price__l .elementor-icon-list-text::before{
  content:"";position:absolute;left:1px;top:.34em;width:13px;height:7px;
  border-left:2.4px solid var(--civ-magenta);border-bottom:2.4px solid var(--civ-magenta);
  transform:rotate(-45deg);
}
/* Paires libellé / précision, à la place des anciennes listes de définitions. */
.elementor .civ-dl2 .elementor-icon-list-items{gap:11px}
.elementor .civ-dl2 .elementor-icon-list-text{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:1rem;
}
.elementor .civ-dl2 .elementor-icon-list-text strong{
  font-family:var(--civ-font-title);font-weight:700;color:var(--civ-ink);
}
.elementor .civ-dl2 .elementor-icon-list-text span{color:var(--civ-text-2)}
.elementor .civ-sec--dark .civ-dl2 .elementor-icon-list-text strong{color:#fff}
.elementor .civ-sec--dark .civ-dl2 .elementor-icon-list-text span{color:var(--civ-on-dark-2)}

/* ---------- Encarts teintés (motif 4) ----------------------------------- */
.elementor .civ-callout{
  background:var(--civ-tint-warm);border-left:3px solid var(--civ-orange);
  border-radius:var(--civ-r-s);padding:clamp(18px,2.6vw,26px) clamp(18px,2.6vw,28px);
}
.elementor .civ-callout--cool{background:var(--civ-tint-cool);border-left-color:var(--civ-violet)}
.elementor .civ-sec--dark .civ-callout{
  background:rgba(255,255,255,.07);border-left-color:var(--civ-on-ramp-soft);
}
.elementor .civ-callout__t .elementor-heading-title{
  font-family:var(--civ-font-title);font-weight:800;color:var(--civ-ink);
  font-size:1.05rem;letter-spacing:-.01em;
}
.elementor .civ-sec--dark .civ-callout__t .elementor-heading-title{color:#fff}
.elementor .civ-callout > .elementor-element + .elementor-element{margin-top:.4rem}

/* ---------- Cartes ------------------------------------------------------- */
.elementor .civ-card{
  background:#fff;border-radius:var(--civ-r-m);box-shadow:var(--civ-shadow-m);
  padding:clamp(22px,2.8vw,30px);
}
.elementor .civ-sec--dark .civ-card{background:var(--civ-ink-hi);box-shadow:none}
.elementor .civ-card--clair{max-width:460px}

/* ---------- Partenaires -------------------------------------------------- */
.elementor .civ-partners{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:820px){.elementor .civ-partners{grid-template-columns:1fr 1fr}}
.elementor .civ-partner--row{display:flex;flex-direction:row;gap:16px;align-items:flex-start}
.elementor .civ-partner__logo{flex:0 0 auto}
.elementor .civ-partner__logo img{width:64px;height:auto;border-radius:12px;display:block}
.elementor .civ-partner__ville{margin-top:6px}
.elementor .civ-partner__ville img{width:min(230px,60vw);height:auto;display:block}
.elementor .civ-partner__t .elementor-heading-title{
  font-family:var(--civ-font-title);font-weight:800;font-size:1.04rem;
}
.elementor .civ-partner__d p{margin:0;color:var(--civ-text-2);font-size:1rem}
.elementor .civ-partner__txt > .elementor-element + .elementor-element{margin-top:.3rem}

/* ---------- Questions fréquentes ---------------------------------------- */
.elementor .civ-qa-list{display:grid;gap:12px;max-width:80ch}
.elementor .civ-qa{
  background:#fff;border-radius:var(--civ-r-s);box-shadow:var(--civ-shadow-s);
  border-left:3px solid var(--civ-violet);
}
.elementor .civ-qa-list > .civ-qa:nth-child(odd){border-left-color:var(--civ-magenta)}
.elementor .civ-qa__q{position:relative;padding:16px 46px 16px 20px}
.elementor .civ-qa__q .elementor-heading-title{
  font-family:var(--civ-font-title);font-weight:700;font-size:1.03rem;line-height:1.35;
}
.elementor .civ-qa__a{padding:0 20px 18px}
.elementor .civ-qa__a p{margin:0;color:var(--civ-text)}
/* Le dépliage n'existe que si le script a pris la main : sans lui, tout le
   contenu reste lisible, simplement déplié. */
.elementor .civ-qa-list--js .civ-qa__q{cursor:pointer}
.elementor .civ-qa-list--js .civ-qa__q::after{
  content:"";position:absolute;right:20px;top:1.45em;width:10px;height:10px;
  border-right:2.4px solid var(--civ-magenta);border-bottom:2.4px solid var(--civ-magenta);
  transform:rotate(45deg);transition:transform .18s ease;
}
.elementor .civ-qa-list--js .civ-qa.is-open .civ-qa__q::after{transform:rotate(225deg)}
.elementor .civ-qa-list--js .civ-qa:not(.is-open) .civ-qa__a{display:none}
.elementor .civ-qa__q:focus-visible{outline:3px solid var(--civ-violet);outline-offset:2px;border-radius:6px}

/* ---------- Hero -------------------------------------------------------- */
.elementor .civ-hero > .e-con-inner{
  display:grid;grid-template-columns:1fr;gap:clamp(26px,3.6vw,52px);
  align-items:center;padding:clamp(42px,6.4vw,84px) var(--civ-gut);
  max-width:var(--civ-wrap);margin-inline:auto;
}
@media (min-width:960px){
  .elementor .civ-hero > .e-con-inner{grid-template-columns:1.05fr .95fr}
}
.elementor .civ-hero__ink > .elementor-element{position:relative;z-index:1}
.elementor .civ-hero__sub p{
  margin:0;color:var(--civ-on-dark-2);font-size:clamp(1.06rem,1.8vw,1.24rem);max-width:38ch;
}
.elementor .civ-hero__cta{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;margin-top:1.4rem}
.elementor .civ-hero__cta .elementor-element{margin-top:0}
.elementor .civ-hero__ink{container-type:inline-size}
.elementor .civ-hero__ink .civ-h1 .elementor-heading-title{
  font-size:clamp(2.35rem,6.2vw,4.1rem);line-height:1.05;letter-spacing:-.02em;
  text-transform:uppercase;font-weight:800;color:#fff;
}
/* Le titre se dimensionne d'après SA COLONNE et non d'après la fenêtre. À
   1425 px de large, « L'INFORMATIQUE » mesurait 626 px pour une colonne de
   542 px : le navigateur coupait le mot — « L'INFORMATIQ / UE ». Réduire la
   taille maximale ne suffisait pas, la colonne rétrécissant avec la fenêtre.
   Le mot fait 9,54 fois la taille de police ; 9,6 cqw laisse 8 % de marge.
   Déclaration séparée pour servir de repli si les unités de conteneur ne sont
   pas comprises. Et, en dernier filet, une césure selon les règles du français
   plutôt qu'une coupe arbitraire. */
.elementor .civ-hero__ink .civ-h1 .elementor-heading-title{
  font-size:clamp(1.75rem,9.6cqw,4.1rem);
  hyphens:auto;
}

/* Bouton fantôme du hero : la charte le veut transparent, cerné de blanc. */
.elementor .civ-btn--ghost .elementor-button{
  background-image:none;background-color:transparent;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
}
.elementor .civ-btn--ghost .elementor-button:hover{
  background-color:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);
}
/* Les deux boutons du hero gardent leur largeur naturelle dans le flux flex. */
.elementor .civ-hero__cta > .elementor-element{flex:0 0 auto;width:auto}

/* Rangée de deux boutons (adhésion en ligne + renvoi interne). */
.elementor .civ-btns{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;align-items:center}
.elementor .civ-btns > .elementor-element{flex:0 0 auto;width:auto;margin-top:0}
/* Second bouton : pilule pleine magenta, pour hiérarchiser les deux appels. */
.elementor .civ-btn--solid .elementor-button{
  background-image:none;background-color:var(--civ-magenta);box-shadow:var(--civ-shadow-s);
}
.elementor .civ-btn--solid .elementor-button:hover{background-color:#C1006A}
/* Variante claire, pour les fonds clairs (plan d'accès). Le widget Bouton
   d'Elementor porte nos classes sur son ENVELOPPE, pas sur le <a> : il faut donc
   viser « .civ-btn--fin .elementor-button » comme pour --ghost et --solid.
   Sans cette règle, les trois boutons d'itinéraire sortaient en magenta plein
   au lieu du contour discret — relevé par le trésorier le 05/09/2026. */
.elementor .civ-btn--fin .elementor-button{
  background-image:none;background-color:transparent;box-shadow:inset 0 0 0 2px rgba(26,12,46,.22);
}
.elementor .civ-btn--fin .elementor-button .elementor-button-text{color:var(--civ-ink,#1A0C2E)}
.elementor .civ-btn--fin .elementor-button:hover{
  background-color:rgba(26,12,46,.06);box-shadow:inset 0 0 0 2px rgba(26,12,46,.38);
}
.elementor .civ-btn--fin .elementor-button:hover .elementor-button-text{color:var(--civ-ink,#1A0C2E)}

/* ==========================================================================
   DÉFAUTS ROBUSTES — ne dépendent pas de la classe de section
   Constaté le 04/09/2026 : quand la classe d'un conteneur n'arrive pas jusqu'au
   navigateur (import, réglage renommé par Elementor, section reconstruite à la
   main), tous les titres qui héritaient leur couleur de « .civ-sec--cream »
   tombaient sur la couleur du thème — bleu ciel, illisible sur crème.
   On donne donc une couleur par défaut à chaque titre, portée par SA PROPRE
   classe. Les fonds sombres et les bandeaux repassent en blanc juste après,
   avec une classe de plus, donc plus fort.
   ========================================================================== */
.elementor [class*="civ-h1--"],.elementor [class*="civ-h2--"],
.elementor [class*="civ-h1--"] .elementor-heading-title,
.elementor [class*="civ-h2--"] .elementor-heading-title,
.elementor .civ-price__n,.elementor .civ-price__n .elementor-heading-title,
.elementor .civ-partner__t,.elementor .civ-partner__t .elementor-heading-title,
.elementor .civ-qa__q,.elementor .civ-qa__q .elementor-heading-title,
.elementor .civ-callout__t,.elementor .civ-callout__t .elementor-heading-title,
.elementor .civ-fb .elementor-image-box-title{color:var(--civ-ink)}
/* Fonds sombres, hero et bandeaux : blanc, et une classe de plus pour gagner. */
.elementor .civ-sec--dark [class*="civ-h2--"],
.elementor .civ-sec--dark [class*="civ-h2--"] .elementor-heading-title,
.elementor .civ-sec--dark .civ-fb .elementor-image-box-title,
.elementor .civ-sec--dark .civ-callout__t .elementor-heading-title,
.elementor .civ-hero [class*="civ-h1--"],
.elementor .civ-hero .civ-h1 .elementor-heading-title,
.elementor .civ-band__t,.elementor .civ-band__t .elementor-heading-title{color:#fff}

/* ---------- Annonce datée (widgets natifs) ------------------------------- */
/* Elementor met tous ses conteneurs en flex-direction:column ; sans le dire
   explicitement, la date et la phrase s'empilaient et le filet vertical
   s'étirait sur toute la hauteur du conteneur. */
.elementor .civ-evt{
  display:flex;flex-direction:row;flex-wrap:wrap;
  gap:4px clamp(14px,2vw,22px);align-items:baseline;align-content:flex-start;
  border-left:3px solid var(--civ-magenta);
  padding:2px 0 2px clamp(14px,2vw,20px);
  min-height:0;
}
.elementor .civ-evt > .elementor-element{margin-top:0}
.elementor .civ-evt__d{flex:0 0 auto}
.elementor .civ-evt__d .elementor-heading-title{
  font-family:var(--civ-font-title);font-weight:800;color:var(--civ-ink);
  font-size:1.06rem;line-height:1.35;
}
.elementor .civ-evt__t{flex:1 1 22ch}
.elementor .civ-evt__t p{margin:0;max-width:64ch}
.elementor .civ-sec--dark .civ-evt{border-left-color:var(--civ-on-ramp-soft)}
.elementor .civ-sec--dark .civ-evt__d .elementor-heading-title{color:#fff}

/* Une actualité n'est pas une annonce : filet violet plutôt que magenta, date
   en retrait. Le lecteur doit voir d'un coup d'œil ce qui l'attend et ce qui
   a déjà eu lieu, sans avoir à lire la date. */
.elementor .civ-evt--passe{border-left-color:var(--civ-violet)}
.elementor .civ-evt--passe .civ-evt__d{color:var(--civ-text-2)}
.elementor .civ-evt--passe .civ-evt__d .elementor-heading-title{color:var(--civ-text-2)}

/* Lien vers le site du partenaire — discret, sous sa description. */
.elementor .civ-partner__lien p{margin:.6rem 0 0;font-size:.95rem}
/* Cible tactile du lien partenaire. Mesuré à 243 × 18 px par audit.py : trop
   petit pour être visé au doigt, et le public du club est âgé — ce détail
   compte plus ici qu'ailleurs. On monte à 44 px de haut (recommandation
   confortable), sans changer l'apparence du lien. */
.elementor .civ-partner__lien a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem 0}
/* Le titre partenaire est un lien : sans cette règle il prend la couleur de
   lien générique (#B3005F), mesurée à 3,16:1 sur le fond chaud de la section —
   sous le seuil AA. Il reprend donc l'encre du titre, et reste identifiable
   comme lien par son soulignement. Défaut préexistant, révélé par audit.py
   le 05/09/2026 une fois la cible tactile agrandie. */


.elementor .civ-partner__t a{color:inherit;text-decoration-color:var(--civ-violet)}
.elementor .civ-partner__t a:hover{color:var(--civ-violet)}

/* --------------------------------------------------------------------------
   Un widget de données structurées ne se voit pas, mais il OCCUPE une case de
   grille tant qu'il est affiché. Régression du 05/09/2026 sur l'accueil : en
   ajoutant le nœud « Event », le hero est passé de deux à trois enfants, et sa
   grille de deux colonnes a renvoyé le texte à droite et la carte à la ligne
   suivante. display:none retire l'élément de la grille — contrairement à
   visibility:hidden ou à une hauteur nulle, qui laissent la case occupée.
   Deux sélecteurs : la classe pour les gabarits régénérés, et le premier
   enfant du hero pour réparer la page déjà importée sans attendre.
   -------------------------------------------------------------------------- */
.elementor .civ-data{display:none}
.elementor .civ-hero > .e-con-inner > .elementor-widget-html:first-child{display:none}

/* ---------- Plan d'accès (SVG hébergé, remplace la carte Google) ---------- */
.elementor .civ-plan__t{font-size:clamp(1.25rem,2.4vw,1.7rem);margin:0 0 1rem}
.elementor .civ-plan__fig{margin:0}
.elementor .civ-plan{display:block;width:100%;height:auto;border-radius:var(--civ-r-m,18px);
  box-shadow:var(--civ-shadow-m,0 8px 30px rgba(26,12,46,.12));background:var(--civ-cream,#FFF7F1);
  font-family:var(--civ-font-text,system-ui,sans-serif)}
.elementor .civ-plan__leg a{display:inline-block;padding:.3rem 0}
.elementor .civ-plan__leg{margin:.7rem 0 0;font-size:.9rem;color:var(--civ-text-2,#6C5A7E);line-height:1.5}
.elementor .civ-plan__liens{display:flex;flex-wrap:wrap;gap:12px;margin:1.1rem 0 0;padding:0;list-style:none}
/* Variante claire du bouton. La variante « ghost » est blanche sur bordure
   blanche : faite pour les sections sombres. Utilisée par erreur sur le fond
   chaud du plan d'accès, elle donnait 1,2:1 — invisible. Celle-ci est prévue
   pour les fonds clairs. */
.elementor .civ-btn.civ-btn--fin{background:transparent;color:var(--civ-ink,#1A0C2E);
  box-shadow:inset 0 0 0 2px rgba(26,12,46,.22)}
.elementor .civ-btn.civ-btn--fin:hover{background:rgba(26,12,46,.06);color:var(--civ-ink,#1A0C2E)}

/* ---------- Titres des pages qui ne sont pas les nôtres -------------------
   POURQUOI (05/09/2026, deuxième diagnostic — le premier était faux).

   La politique de cookies affichait ses titres en #f5f5f5 sur blanc, 1,05:1,
   224 titres. J'ai d'abord cru à une collision entre notre jeton « --ink » et
   celui d'une extension. C'était une vraie fragilité (corrigée : nos jetons
   sont préfixés --civ-*) mais PAS la cause.

   La cause : le thème Astra pose

       h1,h2,h3,h4,h5,h6,.entry-content :where(h1,h2,h3,h4,h5,h6)
           { color: var(--ast-global-color-2) }

   et --ast-global-color-2 vaut #f5f5f5 dans la palette du thème. Le second
   sélecteur pèse (0,1,0) : il bat toute règle d'élément nu, y compris
   « html h2 » (0,0,2) — testé en ligne, sans effet.

   Cette règle-ci pèse (0,1,1) et l'emporte, sans !important. Vérifié en ligne
   avant écriture : 224 titres non conformes avant, 0 après.

   LA VRAIE CORRECTION reste côté thème : Apparence → Personnaliser → Global →
   Couleurs → couleur des titres, à passer de #f5f5f5 à l'encre de la charte.
   Cette règle ne couvre que la zone de contenu ; le réglage du thème couvre
   aussi l'éditeur de blocs et les aperçus d'administration. */
.entry-content h1,.entry-content h2,.entry-content h3,
.entry-content h4,.entry-content h5,.entry-content h6{color:var(--civ-ink,#1A0C2E)}

/* ---------- Bande de photographies (section « Vie du club ») -------------- */
.elementor .civ-photos{display:grid;gap:18px;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media (min-width:700px){.elementor .civ-photos{grid-template-columns:repeat(3,1fr)}}
.elementor .civ-photo figure{margin:0}
.elementor .civ-photo img{display:block;width:100%;height:260px;object-fit:cover;
  border-radius:var(--civ-r-m,18px);box-shadow:var(--civ-shadow-m,0 8px 30px rgba(26,12,46,.12));
  background:var(--civ-tint-warm,#FDE6D8)}
.elementor .civ-photo figcaption{margin:.55rem 0 0;font-size:.88rem;line-height:1.45;
  color:var(--civ-text-2,#6C5A7E)}