@charset "UTF-8";
/* ---------- 0. Polices auto-hébergées (pas de CDN Google : RGPD) --------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/inter-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/archivo-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/archivo-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/archivo-latin-800-normal.woff2") format("woff2")}

/* ==========================================================================
   CIVERP38 — Design system web, dérivé de la charte du flyer (dépliant 3 volets)
   Club Informatique de La Verpillière · civerp38.com
   Aucune couleur hors charte. Aucun #000, aucun #fff en fond de page.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Couleurs de marque */
  --civ-orange:#FF7A18;
  --civ-corail:#FA3C5A;
  --civ-magenta:#E5007E;
  --civ-pourpre:#A81EC8;
  --civ-violet:#7B2FF7;

  /* Fonds et textes */
  --civ-ink:#1A0C2E;          /* fond sombre « encre » */
  --civ-ink-hi:#341658;       /* fond sombre, variante haute */
  --civ-cream:#FFF7F1;        /* fond clair, jamais blanc pur */
  --civ-text:#3B2A4E;         /* texte courant sur fond clair */
  --civ-text-2:#6C5A7E;       /* texte secondaire / légendes */
  --civ-on-dark-2:#D9CDEA;    /* texte secondaire sur fond sombre */
  --civ-tint-warm:#FDE6D8;    /* encart teinté chaud */
  --civ-tint-cool:#F1E6FB;    /* encart teinté froid */
  --civ-on-ramp-soft:#FFE4D2; /* texte adouci sur dégradé */

  /* Dégradés de référence — à utiliser tels quels */
  --civ-ramp:linear-gradient(135deg,#FF7A18 0%,#FA3C5A 35%,#E5007E 62%,#7B2FF7 100%);
  --civ-ramp-h:linear-gradient(96deg,#FF7A18 0%,#E5007E 45%,#7B2FF7 100%);
  /* Variante pour les petites surfaces portant du texte blanc (boutons, pastilles
     de libellé) : même rampe, portion conforme AA. */
  --civ-ramp-btn:linear-gradient(96deg,#E5007E 0%,#A81EC8 55%,#7B2FF7 100%);

  /* Typographie — deux familles maximum */
  --civ-font-title:"Archivo","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --civ-font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Rythme */
  --civ-wrap:1180px;
  --civ-gut:clamp(20px,5vw,48px);
  --civ-sec-y:clamp(56px,8vw,104px);
  --civ-r-s:10px;
  --civ-r-m:16px;
  --civ-r-l:24px;
  --civ-shadow-s:0 2px 8px rgba(26,12,46,.06);
  --civ-shadow-m:0 10px 30px rgba(26,12,46,.10);
  --civ-shadow-l:0 22px 60px rgba(26,12,46,.18);
}

/* ---------- 2. Base ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
/* Marge de contenu identique à celle de .civ-wrap, utilisable en pleine largeur */
:root{--edge:max(var(--civ-gut),calc((100vw - var(--civ-wrap)) / 2 + var(--civ-gut)))}
body{
  margin:0;
  background:var(--civ-cream);
  color:var(--civ-text);
  font-family:var(--civ-font-text);
  font-size:1rem;              /* 16 px plancher — public débutant / senior */
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto}
a{color:#B3005F;text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--civ-magenta)}
/* POURQUOI UN REPLI EN DUR ICI (05/09/2026).
   Cette règle portait « color:var(--ink) », sans préfixe ni repli. Sur la
   page de politique de cookies — générée par Complianz, donc hors de nos
   classes — un autre jeton « --ink » défini à #f5f5f5 gagnait : titres
   blancs sur blanc, contraste mesuré 1,05:1, vingt-huit occurrences.
   Nos trente jetons sont désormais préfixés --civ-* (collision
   impossible) et celui-ci porte en plus l'encre en repli. */
h1,h2,h3,h4{font-family:var(--civ-font-title,Georgia,serif);margin:0;color:var(--civ-ink,#341658);font-weight:800}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
/* Portée limitée à notre propre balisage : cette règle dépouillait aussi
   les listes des pages générées par les extensions (politique de cookies,
   mentions légales), qui doivent garder leurs puces. */
[class*="civ-"] ul,ul[class*="civ-"]{margin:0;padding:0;list-style:none}
strong{font-weight:700}

/* Accessibilité : focus toujours visible, cibles ≥ 44 px */
:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--civ-violet);
  outline-offset:3px;
  border-radius:4px;
}
.civ-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--civ-ink);color:#fff;padding:14px 20px;border-radius:0 0 var(--civ-r-s) 0;
  font-weight:700;text-decoration:none;
}
.civ-skip:focus{left:0}
.civ-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. Grille ---------------------------------------------------- */
.civ-wrap{width:100%;max-width:var(--civ-wrap);margin-inline:auto;padding-inline:var(--civ-gut)}
.civ-sec{padding-block:var(--civ-sec-y);position:relative;overflow:hidden}
.civ-sec--cream{background:var(--civ-cream)}
.civ-sec--warm{background:var(--civ-tint-warm)}

/* ---------- 4. Typographie ---------------------------------------------- */
/* Grands titres : gras, majuscules, interlettrage serré, interligne compact */
.civ-h1{
  font-size:clamp(2.35rem,6.2vw,4.1rem);
  line-height:1.05;letter-spacing:-.02em;
  text-transform:uppercase;font-weight:800;
}
.civ-h2{
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  line-height:1.1;letter-spacing:-.02em;font-weight:800;
}
.civ-h3{font-size:clamp(1.12rem,1.9vw,1.3rem);line-height:1.25;letter-spacing:-.01em;font-weight:700}
.civ-lead{font-size:clamp(1.06rem,1.9vw,1.28rem);line-height:1.5;color:var(--civ-text)}
/* Confort de lecture : on borne la longueur de ligne du texte courant. */
.civ-prose{max-width:72ch}
.elementor .civ-prose,.elementor .civ-prose p{max-width:72ch}

/* Sur-titre (« kicker ») : petites majuscules, gras, interlettrage large, 11–12 px */
.civ-kicker{
  display:block;
  font-family:var(--civ-font-title);
  font-size:.75rem;line-height:1.2;
  font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  margin:0 0 .7rem;
}
/* Teintes vérifiées AA (≥4,5:1) sur crème, encart chaud et encart froid */
.civ-kicker--orange{color:#A85110}
.civ-kicker--magenta{color:#CE0071}
.civ-kicker--violet{color:#7B2FF7}
.civ-kicker--on-dark{color:var(--civ-on-ramp-soft)}

/* Motif 1 — bloc de titre : kicker → titre → filet 60 × 2,5 px */
.civ-rule{
  display:block;width:60px;height:2.5px;border:0;margin:1.1rem 0 0;border-radius:2px;
  background:var(--civ-magenta);
}
.civ-rule--orange{background:var(--civ-orange)}
.civ-rule--violet{background:var(--civ-violet)}
.civ-rule--on-dark{background:var(--civ-on-ramp-soft)}
.civ-titleblock{max-width:56ch}
.civ-titleblock--center{margin-inline:auto;text-align:center}
.civ-titleblock--center .civ-rule{margin-inline:auto}

/* ---------- 5. Motif 2 — pastille dégradée ------------------------------ */
.civ-pastille{
  --civ-p-size:56px;
  flex:0 0 auto;
  width:var(--civ-p-size);height:var(--civ-p-size);
  border-radius:calc(var(--civ-p-size) * .28);   /* rayon = 28 % du côté */
  background:var(--civ-pastille,var(--civ-magenta));   /* aplatie le 05/09/2026 */
  display:grid;place-items:center;
  color:#fff;                                 /* icône en trait blanc */
  box-shadow:0 6px 18px rgba(26,12,46,.16);
}
.civ-pastille svg{width:58%;height:58%;display:block}
.civ-pastille--lg{--civ-p-size:72px}
.civ-pastille--sm{--civ-p-size:44px}

/* Motif 3 — liste picto + texte, deux colonnes */
.civ-feats{display:grid;gap:clamp(22px,3vw,34px)}
.civ-feats--2{grid-template-columns:1fr}
.civ-feats--3{grid-template-columns:1fr}
@media (min-width:720px){
  .civ-feats--2{grid-template-columns:repeat(2,1fr)}
  .civ-feats--3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1020px){
  .civ-feats--3{grid-template-columns:repeat(3,1fr)}
}
.civ-feat{display:flex;gap:16px;align-items:flex-start}
.civ-feat__t{margin:0 0 .3rem;font-size:1.08rem;font-weight:700;color:var(--civ-ink);letter-spacing:-.01em}
.civ-feat__d{margin:0;color:var(--civ-text-2);font-size:1rem;line-height:1.5}
.civ-sec--dark .civ-feat__t{color:#fff}
.civ-sec--dark .civ-feat__d{color:var(--civ-on-dark-2)}

/* ---------- 6. Motif 4 — encarts ---------------------------------------- */
.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);
}
.civ-callout--cool{background:var(--civ-tint-cool);border-left-color:var(--civ-violet)}
.civ-callout--magenta{border-left-color:var(--civ-magenta)}
.civ-callout__t{
  font-family:var(--civ-font-title);font-weight:800;color:var(--civ-ink);
  font-size:1.05rem;margin:0 0 .4rem;letter-spacing:-.01em;
}
.civ-callout p{color:var(--civ-text);font-size:1rem}
.civ-sec--dark .civ-callout{
  background:rgba(255,255,255,.07);border-left-color:var(--civ-on-ramp-soft);
}
.civ-sec--dark .civ-callout__t{color:#fff}
.civ-sec--dark .civ-callout p{color:var(--civ-on-dark-2)}

/* ---------- 7. Motif 5 — section sombre --------------------------------- */
.civ-sec--dark{background:var(--civ-ink);color:#fff}
/* sur fond encre, les liens passent en teinte claire (contraste AA) */
.civ-sec--dark a:not(.civ-btn),.civ-hero a:not(.civ-btn){color:var(--civ-on-ramp-soft)}
.civ-sec--dark a:not(.civ-btn):hover,.civ-hero a:not(.civ-btn):hover{color:#fff}
.civ-sec--dark .civ-h2,.civ-sec--dark .civ-h3,.civ-sec--dark h1,.civ-sec--dark h2,.civ-sec--dark h3{color:#fff}
.civ-sec--dark p{color:var(--civ-on-dark-2)}
/* halo radial très flou, décentré, 20 % d'opacité */
.civ-sec--dark::before{
  content:"";position:absolute;inset:auto auto -18% -12%;
  width:min(760px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(229,0,126,.20) 0%,rgba(229,0,126,0) 68%);
  pointer-events:none;
}
.civ-sec--dark::after{
  content:"";position:absolute;inset:-22% -14% auto auto;
  width:min(620px,80%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(123,47,247,.20) 0%,rgba(123,47,247,0) 68%);
  pointer-events:none;
}
.civ-sec--dark > *{position:relative;z-index:1}

/* ---------- 8. Motif 6 — décor ------------------------------------------ */
/* arcs concentriques blancs à 20 % sur les fonds dégradés */
.civ-arcs{position:absolute;pointer-events:none;inset:auto -12% -22% auto;width:min(560px,78%);opacity:.2}
.civ-arcs circle{fill:none;stroke:#fff;stroke-width:2.2}
/* cercles concentriques colorés à 18 % sur les fonds crème */
.civ-rings{position:absolute;pointer-events:none;inset:auto -8% -26% auto;width:min(460px,60%);opacity:.18}
.civ-rings circle{fill:none;stroke-width:2.4}

/* ---------- 9. Motif 7 — bandeau de section ----------------------------- */
.civ-band{
  position:relative;overflow:hidden;
  /* Deux propriétés et non un raccourci « background », volontairement.
     Bug relevé en ligne le 04/09/2026 : Elementor charge en différé le fond des
     conteneurs de haut niveau et écrit, pour ceux à partir du troisième,
     « background-image:none !important » jusqu'à ce que son script pose la
     classe .e-lazyloaded. Ce script n'observe que les fonds réglés dans son
     interface : le nôtre vient de la charte, la classe n'arrivait donc jamais et
     le dégradé restait supprimé — texte blanc sur crème, 1,06:1.
     Le générateur pose maintenant .e-no-lazyload sur tous les conteneurs de
     haut niveau. Si une version future d'Elementor renommait cette classe, la
     couleur de repli ci-dessous garde le texte lisible (blanc sur #A81EC8 :
     5,7:1) au lieu de le faire disparaître. */
  background-color:#A81EC8;
  background-image:var(--civ-ramp-h);
  padding-block:clamp(30px,4.4vw,52px);
  color:#fff;
}
/* fines stries diagonales blanches à 5 % */
.civ-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 12px,rgba(255,255,255,0) 12px 30px);
}
/* La charte interdit le texte clair sur orange ; le dégradé horizontal commence
   pourtant par l'orange. On approfondit donc l'extrémité orange avec un voile
   d'encre dégressif : la rampe reste visible et le blanc atteint 4,77:1 partout. */
.civ-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,rgba(26,12,46,.34) 0%,rgba(26,12,46,.18) 24%,rgba(26,12,46,0) 50%);
}
.civ-band > *{position:relative;z-index:2}
.civ-band > *{position:relative;z-index:1}
.civ-band--encre{background-color:var(--civ-ink);background-image:none}
.civ-band--encre::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:2;
  background:var(--civ-ramp-h);
}
.civ-band--encre::after{background:none}
.civ-band__t{
  font-family:var(--civ-font-title);font-weight:800;color:#fff;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.12;
  font-size:clamp(1.3rem,2.9vw,2.05rem);margin:0;
}
.civ-band__s{margin:.7rem 0 0;color:#fff;font-size:1.06rem;max-width:62ch}

/* ---------- 9 bis. Annonce datée -----------------------------------------
   Volontairement sobre : pas de dégradé, pas de pastille, pas de carte à
   ombre. Une date réelle est ce qu'il y a de plus humain sur une page — elle
   n'a pas besoin d'être décorée pour se voir, et l'habiller la ferait
   ressembler au reste. Un filet vertical, une date en gras, une phrase. */
.civ-evt{
  display:flex;gap:clamp(14px,2vw,22px);align-items:baseline;flex-wrap:wrap;
  border-left:3px solid var(--civ-magenta);
  padding:2px 0 2px clamp(14px,2vw,20px);
  margin:0;
}
.civ-evt__d{
  flex:0 0 auto;
  font-family:var(--civ-font-title);font-weight:800;
  color:var(--civ-ink);font-size:1.06rem;line-height:1.35;
}
.civ-evt__t{margin:0;color:var(--civ-text);max-width:64ch;line-height:1.55}
.civ-evt__t strong{color:var(--civ-ink)}
.civ-sec--dark .civ-evt__d{color:#fff}
.civ-sec--dark .civ-evt__t{color:var(--civ-on-dark-2)}
.civ-sec--dark .civ-evt__t strong{color:#fff}
.civ-sec--dark .civ-evt{border-left-color:var(--civ-on-ramp-soft)}

/* ---------- 10. Hero ---------------------------------------------------- */
/* Composition du flyer : panneau encre (titre) + panneau dégradé (logo, activités) */
/* Fond encre pleine largeur (motif 5) + carte dégradée alignée sur la grille */
.civ-hero{position:relative;background:var(--civ-ink);color:#fff;overflow:hidden}
.civ-hero::before{
  content:"";position:absolute;inset:auto auto -34% -14%;
  width:min(860px,80%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(229,0,126,.20) 0%,rgba(229,0,126,0) 66%);
  pointer-events:none;
}
.civ-hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;align-items:center;
  gap:clamp(32px,4.5vw,48px);
  padding-block:clamp(46px,6.6vw,88px);
}
@media (min-width:960px){.civ-hero__grid{grid-template-columns:1.28fr 1fr}}
/* Fondu d'encre au pied de la carte : l'adresse et les horaires en blanc
   restent conformes AA même sur la portion magenta de la rampe. */
.civ-hero__ramp::after{
  content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;
  background:linear-gradient(to top,rgba(26,12,46,.30) 0%,rgba(26,12,46,0) 100%);
}
.civ-hero__ramp > *:not(svg){position:relative;z-index:1}   /* le décor reste absolu */
/* La colonne de gauche devient sa propre référence de taille : le titre du hero
   se dimensionne d'après ELLE, pas d'après la fenêtre. Sans cela, à 1425 px de
   large, « L'INFORMATIQUE » mesurait 626 px pour une colonne de 542 px, et le
   navigateur coupait le mot en deux — « L'INFORMATIQ / UE ». Constaté en ligne
   le 04/09/2026. Une simple réduction de la taille maximale ne suffisait pas :
   la colonne rétrécit avec la fenêtre, le défaut revenait vers 1000 px. */
.civ-hero__ink{position:relative;container-type:inline-size}
.civ-hero__ink > *{position:relative;z-index:1}
.civ-hero__title{color:#fff}
.civ-hero__title span{display:block}   /* titre cassé en trois lignes courtes */
/* Deux déclarations, dans cet ordre : la première est le repli pour un
   navigateur qui ignorerait les unités de conteneur (l'unité inconnue rend la
   seconde invalide, donc ignorée). 9,6 cqw : « L'INFORMATIQUE » fait 9,54 fois
   la taille de police, il reste donc 8 % de marge dans la colonne. */
.civ-hero__title{font-size:clamp(2.35rem,6.2vw,4.1rem)}
.civ-hero__title{font-size:clamp(1.75rem,9.6cqw,4.1rem)}
/* Dernier filet : si le mot ne tient toujours pas, qu'il soit coupé selon les
   règles de la langue (lang="fr-FR" est posé sur <html>) plutôt que n'importe
   où. « l'infor-matique » se lit ; « l'informatiq / ue » non. */
.civ-hero__title{hyphens:auto}
.civ-hero__sub{margin:1.35rem 0 0;color:var(--civ-on-dark-2);font-size:clamp(1.06rem,1.8vw,1.24rem);max-width:38ch}
.civ-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
.civ-hero__ramp{
  position:relative;overflow:hidden;
  background:var(--civ-ramp);border-radius:var(--civ-r-l);
  padding:clamp(28px,3.4vw,38px);
  display:flex;flex-direction:column;gap:22px;
  box-shadow:var(--civ-shadow-l);
}
.civ-hero__logo{
  /* le logo bleu/orange est toujours isolé sur une pastille blanche */
  background:#fff;border-radius:22px;padding:16px;
  display:block;width:fit-content;box-shadow:var(--civ-shadow-l);
}
.civ-hero__logo img{display:block;width:min(190px,42vw);height:auto}
.civ-chips{display:flex;flex-wrap:wrap;gap:8px}
.civ-chip{
  background:#fff;color:var(--civ-ink);        /* jamais de texte clair sur orange */
  font-family:var(--civ-font-title);font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.05em;
  padding:8px 13px;border-radius:999px;
}
/* le bandeau dégradé passe par le violet/magenta ici : blanc conforme AA */
.civ-hero__meta{margin:0;color:#fff;font-weight:600;font-size:1rem;line-height:1.5}
.civ-hero__meta a{color:#fff}

/* ---------- 11. Boutons ------------------------------------------------- */
.civ-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;                              /* cible ≥ 44 px */
  padding:12px 24px;border:0;border-radius:999px;
  font-family:var(--civ-font-title);font-weight:800;font-size:1rem;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.civ-btn:hover{transform:translateY(-1px)}
/* Sur une pilule, --civ-ramp-h écraserait tout l'orange sous le texte : la charte
   l'interdit. On prend la portion magenta → pourpre → violet de la rampe. */
/* Les variantes exigent AUSSI la classe .civ-btn — ce n'est pas un excès de
   prudence. En Elementor, la classe de variante ne peut être posée que sur
   l'enveloppe du widget, jamais sur le <a> : le pont la récupère par
   « .civ-btn--ghost .elementor-button ». Écrites sur la seule classe de
   variante, ces règles peignaient donc aussi l'enveloppe — un bloc carré de
   pleine hauteur derrière la pilule. Constaté en ligne le 04/09/2026 : cadre
   blanc rectangulaire autour de « Horaires & adresse », rectangle magenta
   derrière « Détail des tarifs et de l'inscription ». Le balisage de la
   maquette porte les deux classes, l'enveloppe Elementor une seule. */
/* Aplati le 05/09/2026 : le dégradé + l'ombre colorée sur un bouton sont un
   marqueur immédiat de page fabriquée à la chaîne. La rampe reste réservée au
   hero et au bandeau. Le nom de la variante ne change pas : le balisage déjà
   en ligne continue de fonctionner. */
.civ-btn.civ-btn--ramp{background:var(--civ-magenta);color:#fff;box-shadow:0 1px 2px rgba(26,12,46,.14)}
.civ-btn.civ-btn--ramp:hover{color:#fff;background:#C1006A;box-shadow:0 2px 6px rgba(26,12,46,.20)}
.civ-btn.civ-btn--solid{background:var(--civ-magenta);color:#fff}
.civ-btn.civ-btn--solid:hover{background:#C1006A;color:#fff}
.civ-btn.civ-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.civ-btn.civ-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.civ-btn.civ-btn--ink{background:var(--civ-ink);color:#fff}
.civ-btn.civ-btn--ink:hover{background:var(--civ-ink-hi);color:#fff}
/* sur orange, on écrit en encre foncée (contraste) */
.civ-btn--orange{background:var(--civ-orange);color:var(--civ-ink)}
.civ-btn--orange:hover{background:#FF8B36;color:var(--civ-ink)}

/* ---------- 12. En-tête / navigation ------------------------------------ */
.civ-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,247,241,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid rgba(59,42,78,.10);
}
.civ-head__in{display:flex;align-items:center;gap:18px;min-height:74px}
.civ-brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.civ-brand__pad{background:#fff;border-radius:12px;padding:5px;box-shadow:var(--civ-shadow-s);flex:0 0 auto}
.civ-brand__pad img{display:block;width:44px;height:auto}
.civ-brand__n{font-family:var(--civ-font-title);font-weight:800;color:var(--civ-ink);font-size:1rem;line-height:1.1;letter-spacing:-.01em}
.civ-brand__n small{display:block;font-weight:600;font-size:.75rem;color:var(--civ-text-2);letter-spacing:.02em;text-transform:none}
.civ-nav{display:none}
.civ-nav ul{display:flex;align-items:center;gap:4px}
.civ-nav a{
  display:flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;
  font-weight:600;font-size:1rem;color:var(--civ-text);text-decoration:none;
  white-space:nowrap;
}
.civ-nav a:hover{background:var(--civ-tint-cool);color:var(--civ-ink)}
.civ-nav a[aria-current="page"]{color:var(--civ-ink);background:var(--civ-tint-warm);font-weight:700}
.civ-head .civ-btn{padding:10px 20px;font-size:1rem;min-height:44px;white-space:nowrap;flex:0 0 auto}
.civ-btn{white-space:nowrap}
.civ-burger{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
  background:var(--civ-ink);color:#fff;border:0;border-radius:999px;
  font-family:var(--civ-font-title);font-weight:700;font-size:.9rem;cursor:pointer;
}
@media (max-width:759px){
  /* sous 760 px, le menu et le hero portent déjà l'appel à l'action */
  .civ-head .civ-btn{display:none}
  .civ-brand__n{font-size:.95rem}
  .civ-brand__pad img{width:38px}
}
@media (min-width:1120px){
  .civ-nav{display:block}
  .civ-burger{display:none}
}
.civ-mob{display:none;border-top:1px solid rgba(59,42,78,.10);background:var(--civ-cream)}
.civ-mob.is-open{display:block}
.civ-mob ul{padding:10px 0 18px}
.civ-mob a{
  display:flex;align-items:center;min-height:52px;padding:0 4px;
  font-weight:600;color:var(--civ-text);text-decoration:none;
  border-bottom:1px solid rgba(59,42,78,.08);
}
.civ-mob a[aria-current="page"]{color:var(--civ-ink);font-weight:800}
@media (min-width:1120px){.civ-mob,.civ-mob.is-open{display:none}}

/* ---------- 13. Cartes tarifs ------------------------------------------- */
.civ-prices{display:grid;gap:20px;grid-template-columns:1fr}
/* La grille suit le nombre de formules publiées : deux cartes se partagent la
   largeur au lieu de laisser une colonne vide. Seuils relevés le 04/09/2026 :
   trois colonnes à partir de 900 px seulement — en dessous, une carte de tarif
   tombait à 206 px et son intitulé passait sur deux lignes. */
@media (min-width:700px){.civ-prices--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.civ-prices{grid-template-columns:repeat(3,1fr)}}
.civ-price{
  background:#fff;border-radius:var(--civ-r-m);padding:26px 24px 24px;
  box-shadow:var(--civ-shadow-m);display:flex;flex-direction:column;
  border-top:4px solid var(--civ-orange);
}
.civ-price:nth-child(2){border-top-color:var(--civ-magenta)}
.civ-price:nth-child(3){border-top-color:var(--civ-violet)}
.civ-price--star{box-shadow:0 18px 46px rgba(229,0,126,.20)}
.civ-price__tag{
  display:inline-block;align-self:flex-start;margin:0 0 12px;
  background: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;
}
.civ-price__n{font-family:var(--civ-font-title);font-weight:800;color:var(--civ-ink);font-size:1.16rem;margin:0 0 6px;letter-spacing:-.01em}
.civ-price__a{
  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;margin:6px 0 14px;
}
.civ-price__a span{font-size:.42em;font-weight:700;color:var(--civ-text-2);letter-spacing:0}
/* Composition du total (« dont 10 € d'adhésion + 65 € de cotisation ») : le flyer
   V8 raisonne en adhésion + cotisation, le total reste le chiffre lisible d'un
   coup d'œil et sa décomposition se lit juste en dessous. */
.civ-price__s{
  margin:-8px 0 12px;color:var(--civ-text);font-size:1rem;font-weight:600;
  padding-left:11px;border-left:3px solid var(--civ-magenta);
}
.civ-price__d{color:var(--civ-text-2);font-size:1rem;margin:0}
.civ-price__l{margin:14px 0 0;display:grid;gap:8px}
.civ-price__l li{position:relative;padding-left:24px;color:var(--civ-text);font-size:1rem}
.civ-price__l li::before{
  content:"";position:absolute;left:0;top:.42em;width:13px;height:7px;
  border-left:2.4px solid var(--civ-magenta);border-bottom:2.4px solid var(--civ-magenta);
  transform:rotate(-45deg);
}

/* ---------- 14. Blocs d'information ------------------------------------- */
.civ-cols{display:grid;gap:clamp(24px,3.4vw,40px);grid-template-columns:1fr}
@media (min-width:900px){.civ-cols--2{grid-template-columns:1fr 1fr}.civ-cols--side{grid-template-columns:1.5fr 1fr}}
.civ-card{background:#fff;border-radius:var(--civ-r-m);padding:clamp(22px,2.8vw,30px);box-shadow:var(--civ-shadow-m)}
.civ-sec--dark .civ-card{background:var(--civ-ink-hi);box-shadow:none}
.civ-info{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:900px){.civ-info{grid-template-columns:repeat(3,1fr)}}
.civ-info__h{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.civ-info__h h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:var(--civ-ink)}
.civ-sec--dark .civ-info__h h3{color:var(--civ-on-ramp-soft)}
.civ-dl{margin:0;display:grid;gap:10px}
.civ-dl div{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.civ-dl dt{font-weight:700;color:var(--civ-ink);font-size:1rem}
.civ-dl dd{margin:0;color:var(--civ-text-2);font-size:1rem}
.civ-sec--dark .civ-dl dt{color:#fff}
.civ-sec--dark .civ-dl dd{color:var(--civ-on-dark-2)}
.civ-note{font-size:.95rem;color:var(--civ-text-2);margin-top:12px}
.civ-sec--dark .civ-note{color:var(--civ-on-dark-2)}

/* ---------- 15. FAQ (GEO : réponses courtes et citables) ---------------- */
.civ-faq{display:grid;gap:12px;max-width:80ch}
.civ-faq details{
  background:#fff;border-radius:var(--civ-r-s);box-shadow:var(--civ-shadow-s);
  border-left:3px solid var(--civ-violet);
}
.civ-faq details:nth-child(odd){border-left-color:var(--civ-magenta)}
.civ-faq summary{
  cursor:pointer;list-style:none;padding:16px 20px;min-height:44px;
  font-family:var(--civ-font-title);font-weight:700;color:var(--civ-ink);font-size:1.03rem;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.civ-faq summary::-webkit-details-marker{display:none}
.civ-faq summary::after{
  content:"";flex:0 0 auto;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;
}
.civ-faq details[open] summary::after{transform:rotate(225deg)}
.civ-faq .civ-faq__a{padding:0 20px 18px;color:var(--civ-text);font-size:1rem}

/* ---------- 16. Partenaires --------------------------------------------- */
.civ-partners{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:820px){.civ-partners{grid-template-columns:1fr 1fr}}
.civ-partner{display:flex;gap:16px;align-items:flex-start}
.civ-partner__mark{
  flex:0 0 auto;width:64px;height:64px;border-radius:12px;   /* angles légèrement arrondis */
  /* Logo officiel AIFI Nord-Isère. Il est posé en fond, et non en <img>, pour que
     le remplacement se fasse par la seule feuille de style : le balisage des
     gabarits Elementor déjà en ligne n'a pas à être réimporté. Le libellé du
     balisage reste en place et sert de repli si l'image venait à manquer. */
  background:#2E2A6B url("logo-aifi-nord-isere.png") center/100% 100% no-repeat;
  display:grid;place-items:center;
  font-family:var(--civ-font-title);font-weight:800;letter-spacing:.02em;
  font-size:0;color:transparent;
}
.civ-partner__ville{display:block;margin-top:6px}
.civ-partner__ville img{display:block;width:min(230px,60vw);height:auto}
.civ-partner__t{font-family:var(--civ-font-title);font-weight:800;color:var(--civ-ink);font-size:1.04rem;margin:0 0 .3rem}
.civ-partner__d{margin:0;color:var(--civ-text-2);font-size:1rem}

/* ---------- 17. Fil d'Ariane ------------------------------------------- */
.civ-crumb{padding-block:4px;background:var(--civ-cream);border-bottom:1px solid rgba(59,42,78,.08)}
.civ-crumb ol{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0;padding:0;list-style:none;font-size:1rem;color:var(--civ-text-2)}
.civ-crumb li{display:flex;align-items:center;gap:10px}
.civ-crumb li+li::before{content:"›";color:var(--civ-text-2)}
.civ-crumb a{color:var(--civ-text-2);display:inline-flex;align-items:center;min-height:44px}
.civ-crumb [aria-current="page"]{color:var(--civ-ink);font-weight:700}

/* ---------- 18. Pied de page ------------------------------------------- */
.civ-foot{background:var(--civ-ink);color:var(--civ-on-dark-2);padding-block:clamp(42px,5.6vw,64px) 26px;position:relative;overflow:hidden}
.civ-foot::before{
  content:"";position:absolute;inset:-28% -10% auto auto;width:min(560px,70%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(123,47,247,.20) 0%,rgba(123,47,247,0) 68%);pointer-events:none;
}
.civ-foot > *{position:relative;z-index:1}
.civ-foot__grid{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:820px){.civ-foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.civ-foot h2,.civ-foot h3{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:800;margin:0 0 14px}
.civ-foot a{color:var(--civ-on-dark-2)}
.civ-foot a:hover{color:#fff}
.civ-foot ul{display:grid;gap:2px}
.civ-foot ul a{display:inline-flex;align-items:center;min-height:44px}
.civ-foot__pad{background:#fff;border-radius:14px;padding:9px;display:block;width:fit-content;margin-bottom:16px}
.civ-foot__pad img{display:block;width:72px;height:auto}
.civ-foot__bar{
  margin-top:34px;padding-top:8px;border-top:1px solid rgba(217,205,234,.18);
  display:flex;flex-wrap:wrap;gap:0 22px;align-items:center;font-size:.95rem;
}
.civ-foot__bar a{display:inline-flex;align-items:center;min-height:44px}
.civ-foot__bar p{margin:0}
.civ-foot__ramp{height:4px;background:var(--civ-ramp-h);margin-top:22px;border-radius:2px}

/* ---------- 19. Divers -------------------------------------------------- */
/* Cible cliquable ≥ 44 px : le public appelle beaucoup depuis un téléphone */
.civ-tel{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--civ-font-title);font-weight:800;color:var(--civ-ink);font-size:1.12rem;
  text-decoration:none;letter-spacing:-.01em;
}
.civ-tel:hover{text-decoration:underline}
.civ-sec--dark .civ-tel{color:#fff}
.civ-stack{display:grid;gap:clamp(22px,3vw,32px)}
.civ-mt{margin-top:clamp(30px,4vw,48px)}
.civ-answer{  /* bloc de réponse courte et citable — travail GEO */
  background:var(--civ-tint-cool);border-left:3px solid var(--civ-violet);border-radius:var(--civ-r-s);
  padding:20px 22px;font-size:1.06rem;color:var(--civ-text);max-width:78ch;
}
.civ-answer strong{color:var(--civ-ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .civ-btn:hover{transform:none}
}

@media print{
  .civ-head,.civ-mob,.civ-burger,.civ-arcs,.civ-rings{display:none !important}
  body{background:#fff;color:#000}
  .civ-sec--dark,.civ-hero,.civ-foot,.civ-band{background:#fff !important;color:#000 !important}
  .civ-sec--dark *,.civ-hero *,.civ-foot *,.civ-band *{color:#000 !important}
  /* Les fonds d'image ne s'impriment pas : le libellé du partenaire reprend sa place. */
  .civ-partner__mark{background:none !important;color:#000 !important;font-size:1rem}
}

/* Deux boutons côte à côte, qui se replient l'un sous l'autre sur mobile. */
.civ-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* 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. */
.civ-evt--passe{border-left-color:var(--civ-violet)}
.civ-evt--passe .civ-evt__d{color:var(--civ-text-2)}

/* Lien vers le site du partenaire — discret, sous sa description. */
.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. */
.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. */


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

/* ---------- Plan d'accès (SVG hébergé, remplace la carte Google) ---------- */
.civ-plan__t{font-size:clamp(1.25rem,2.4vw,1.7rem);margin:0 0 1rem}
.civ-plan__fig{margin:0}
.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)}
.civ-plan__leg a{display:inline-block;padding:.3rem 0}
.civ-plan__leg{margin:.7rem 0 0;font-size:.9rem;color:var(--civ-text-2,#6C5A7E);line-height:1.5}
.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. */
.civ-btn.civ-btn--fin{background:transparent;color:var(--civ-ink,#1A0C2E);
  box-shadow:inset 0 0 0 2px rgba(26,12,46,.22)}
.civ-btn.civ-btn--fin:hover{background:rgba(26,12,46,.06);color:var(--civ-ink,#1A0C2E)}

/* ---------- Bande de photographies (section « Vie du club ») -------------- */
.civ-photos{display:grid;gap:18px;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media (min-width:700px){.civ-photos{grid-template-columns:repeat(3,1fr)}}
.civ-photo figure{margin:0}
.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)}
.civ-photo figcaption{margin:.55rem 0 0;font-size:.88rem;line-height:1.45;
  color:var(--civ-text-2,#6C5A7E)}