/* ============================================================
   CEWeb Widgets — Coordonnées (cartes de contact)
   Tous les réglages de l'onglet Style arrivent par des variables
   --ceweb-coordonnees-* posées par Elementor.

   Charte : celle des deux autres onglets de la page contact (formulaire et
   prise de rendez-vous MyCEWeb) — carte blanche à filet, rayon 32 px, titre
   à fin italique, pastilles vert CEWeb à glyphe bleu nuit, et la colonne
   colorée en bleu CEWeb, texte blanc, italique bleu nuit, glyphes verts.

   Trois principes gouvernent ce fichier.

   1. **Une ambiance par panneau, en variables `-auto`.** La classe
      `--light`, `--brand` ou `--dark` pose toutes les couleurs du panneau
      d'un coup ; chaque propriété lit `var(--x, var(--x-auto))`. Les
      variables sans suffixe appartiennent aux contrôles de couleur et ne sont
      **jamais déclarées ici** : un `var()` ne prend son repli que si la
      variable est absente, la déclarer même vide couperait l'ambiance.

   2. **Chaque balise que les thèmes stylent porte sa propre remise à zéro,
      avec un sélecteur long** — `h2`…`h6`, `ul`, `li`, `a`, `em`. Les
      sélecteurs du thème et d'Elementor (`.elementor ul`, `.entry-content a`)
      battent une simple classe.

   3. **Le survol ne touche jamais au flux.** Le fond teinté de la ligne est
      un `::before` débordant, le halo de la pastille une `box-shadow`, la
      zone cliquable un `::after` du lien étiré sur la ligne.

   Les couleurs viennent de la palette du thème — -1 bleu CEWeb, -3 vert CEWeb,
   -6 bleu nuit, -7 texte, -9 filets, -11 fond — avec leur valeur du site en
   repli, comme les feuilles de MyCEWeb.
   ============================================================ */

/* Dans un conteneur flexbox Elementor, un widget est un élément flex en
   `flex: 0 1 auto` : sa largeur suivrait son contenu au lieu de la section.
   Même remède que l'« Accordéon d'images » et « Constats ». */
.elementor-widget-ceweb_coordonnees{ width: 100%; }

.ceweb-coordonnees{
  /* Disposition */
  --ceweb-coordonnees-cols: repeat(2, minmax(0, 1fr));
  --ceweb-coordonnees-gap: 24px;
  --ceweb-coordonnees-align: stretch;

  /* Panneau */
  --ceweb-coordonnees-padding: 48px;
  --ceweb-coordonnees-radius: 32px;
  --ceweb-coordonnees-border-width: 1px;

  /* Titre — taille, graisse et approche des titres du formulaire de contact
     (.mcwc-title), pour que les trois onglets se répondent. */
  --ceweb-coordonnees-title-size: 32px;
  --ceweb-coordonnees-title-gap: 32px;

  /* Lignes */
  --ceweb-coordonnees-item-space: 24px;   /* de part et d'autre du filet */
  --ceweb-coordonnees-line-width: 1px;
  --ceweb-coordonnees-label-gap: 6px;

  /* Pastille */
  --ceweb-coordonnees-badge-size: 42px;
  --ceweb-coordonnees-badge-radius: 12px;
  --ceweb-coordonnees-badge-gap: 16px;
  --ceweb-coordonnees-icon-size: 18px;
  --ceweb-coordonnees-icon-stroke: 1.75;

  /* Survol */
  --ceweb-coordonnees-duration: 220ms;
  --ceweb-coordonnees-ease: cubic-bezier(.22, .8, .26, 1);

  display: grid;
  grid-template-columns: var(--ceweb-coordonnees-cols);
  gap: var(--ceweb-coordonnees-gap);
  align-items: var(--ceweb-coordonnees-align);
  width: 100%;
  box-sizing: border-box;
}
.ceweb-coordonnees *,
.ceweb-coordonnees *::before,
.ceweb-coordonnees *::after{ box-sizing: border-box; }

.ceweb-coordonnees--single{ --ceweb-coordonnees-cols: minmax(0, 1fr); }

.ceweb-coordonnees__empty{
  padding: 16px 20px; border: 1px dashed #d63638; border-radius: 8px;
  color: #1d2327; font: 14px/1.5 system-ui, sans-serif;
}

/* ============================================================
   Ambiances

   Les voiles blancs des ambiances colorées sont des `rgba` de blanc et non
   des couleurs de palette : un voile blanc éclaircit n'importe quel fond
   sombre, là où une couleur fixe supposerait savoir ce qu'il y a dessous —
   même choix que l'ambiance sombre d'« Engagements ».
   ============================================================ */
.ceweb-coordonnees__panel--light{
  --ceweb-coordonnees-bg-auto: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-coordonnees-border-auto: var(--theme-palette-color-9, #E2E8F0);
  --ceweb-coordonnees-title-auto: var(--theme-palette-color-6, #0C1A3C);
  /* `currentColor` sur `color` vaut la couleur héritée : l'italique suit le
     titre, y compris quand le contrôle « Titre » la change. */
  --ceweb-coordonnees-accent-auto: currentColor;
  --ceweb-coordonnees-label-auto: var(--theme-palette-color-7, #475569);
  --ceweb-coordonnees-value-auto: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-coordonnees-value-hover-auto: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-coordonnees-line-auto: var(--theme-palette-color-9, #E2E8F0);
  --ceweb-coordonnees-badge-bg-auto: var(--theme-palette-color-3, #50C878);
  --ceweb-coordonnees-badge-color-auto: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-coordonnees-tint-auto: color-mix(in srgb, var(--theme-palette-color-1, #1A6FFF) 6%, transparent);
  --ceweb-coordonnees-ring-auto: color-mix(in srgb, var(--theme-palette-color-3, #50C878) 30%, transparent);
  --ceweb-coordonnees-focus-auto: var(--theme-palette-color-1, #1A6FFF);
}

/* Le bleu CEWeb de la colonne latérale du formulaire et de la colonne
   d'information de la prise de rendez-vous. Le jaune de la maquette devient
   ce bleu ; son vert sapin, le bleu nuit des pastilles et de l'italique. */
.ceweb-coordonnees__panel--brand{
  --ceweb-coordonnees-bg-auto: var(--theme-palette-color-1, #1A6FFF);
  --ceweb-coordonnees-border-auto: transparent;
  --ceweb-coordonnees-title-auto: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-coordonnees-accent-auto: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-coordonnees-label-auto: rgba(255, 255, 255, .78);
  --ceweb-coordonnees-value-auto: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-coordonnees-value-hover-auto: var(--theme-palette-color-3, #50C878);
  --ceweb-coordonnees-line-auto: rgba(255, 255, 255, .2);
  --ceweb-coordonnees-badge-bg-auto: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-coordonnees-badge-color-auto: var(--theme-palette-color-3, #50C878);
  --ceweb-coordonnees-tint-auto: rgba(255, 255, 255, .1);
  --ceweb-coordonnees-ring-auto: rgba(255, 255, 255, .28);
  --ceweb-coordonnees-focus-auto: var(--theme-palette-color-11, #FFFFFF);
}

.ceweb-coordonnees__panel--dark{
  --ceweb-coordonnees-bg-auto: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-coordonnees-border-auto: transparent;
  --ceweb-coordonnees-title-auto: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-coordonnees-accent-auto: var(--theme-palette-color-3, #50C878);
  --ceweb-coordonnees-label-auto: rgba(255, 255, 255, .7);
  --ceweb-coordonnees-value-auto: var(--theme-palette-color-11, #FFFFFF);
  --ceweb-coordonnees-value-hover-auto: var(--theme-palette-color-3, #50C878);
  --ceweb-coordonnees-line-auto: rgba(255, 255, 255, .14);
  --ceweb-coordonnees-badge-bg-auto: var(--theme-palette-color-3, #50C878);
  --ceweb-coordonnees-badge-color-auto: var(--theme-palette-color-6, #0C1A3C);
  --ceweb-coordonnees-tint-auto: rgba(255, 255, 255, .06);
  --ceweb-coordonnees-ring-auto: rgba(255, 255, 255, .18);
  --ceweb-coordonnees-focus-auto: var(--theme-palette-color-3, #50C878);
}

/* ============================================================
   Panneau
   ============================================================ */
.ceweb-coordonnees__panel{
  min-width: 0;
  margin: 0;
  padding: var(--ceweb-coordonnees-padding);
  background: var(--ceweb-coordonnees-bg, var(--ceweb-coordonnees-bg-auto));
  border: var(--ceweb-coordonnees-border-width) solid var(--ceweb-coordonnees-border, var(--ceweb-coordonnees-border-auto));
  border-radius: var(--ceweb-coordonnees-radius);
  /* Une section Elementor centrée donnerait son `text-align` aux lignes. */
  text-align: left;
}

/* ============================================================
   Titre

   La police vient de la balise (Fraunces, réservée par le thème aux
   `h1`–`h6`). Taille, graisse 400 et approche serrée sont celles des titres du
   formulaire de contact : le sélecteur long bat la règle du thème sur `h2`
   sans toucher à sa `font-family`. Le group control Typographie reprend la
   main au besoin.
   ============================================================ */
.ceweb-coordonnees .ceweb-coordonnees__panel .ceweb-coordonnees__title{
  margin: 0 0 var(--ceweb-coordonnees-title-gap);
  padding: 0;
  color: var(--ceweb-coordonnees-title, var(--ceweb-coordonnees-title-auto));
  font-size: var(--ceweb-coordonnees-title-size);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: inherit;
  text-transform: none;
}

/* `<em>` : la fin du titre, en italique comme sur les titres MyCEWeb. Le
   sélecteur long bat les `.elementor em` des thèmes. */
.ceweb-coordonnees .ceweb-coordonnees__panel .ceweb-coordonnees__title em{
  color: var(--ceweb-coordonnees-accent, var(--ceweb-coordonnees-accent-auto));
  font-style: italic;
  font-weight: inherit;
}

/* ============================================================
   Liste

   Les lignes sont séparées par un filet, sans filet après la dernière ni
   d'espace avant la première : l'espace et le filet n'existent qu'entre deux
   lignes, d'où le sélecteur `+`.
   ============================================================ */
.ceweb-coordonnees .ceweb-coordonnees__panel .ceweb-coordonnees__list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.ceweb-coordonnees .ceweb-coordonnees__panel .ceweb-coordonnees__item{
  margin: 0;
  padding: 0;
  list-style: none;
}
.ceweb-coordonnees .ceweb-coordonnees__panel .ceweb-coordonnees__item::before,
.ceweb-coordonnees .ceweb-coordonnees__panel .ceweb-coordonnees__item::marker{
  content: none;
}

.ceweb-coordonnees .ceweb-coordonnees__panel .ceweb-coordonnees__item + .ceweb-coordonnees__item{
  margin-top: var(--ceweb-coordonnees-item-space);
  padding-top: var(--ceweb-coordonnees-item-space);
  border-top: var(--ceweb-coordonnees-line-width) solid var(--ceweb-coordonnees-line, var(--ceweb-coordonnees-line-auto));
}

/* La rangée — pastille, puis texte. Repère du fond de survol et de la zone
   cliquable, et `isolation: isolate` pour que le `z-index: -1` du fond reste
   *dans* la rangée : sans elle, il passerait derrière le fond du panneau,
   dessiné mais invisible. */
.ceweb-coordonnees__row{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  gap: var(--ceweb-coordonnees-badge-gap);
}

/* ============================================================
   Pastille
   ============================================================ */
.ceweb-coordonnees__badge{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ceweb-coordonnees-badge-size);
  height: var(--ceweb-coordonnees-badge-size);
  background: var(--ceweb-coordonnees-badge-bg, var(--ceweb-coordonnees-badge-bg-auto));
  color: var(--ceweb-coordonnees-badge-color, var(--ceweb-coordonnees-badge-color-auto));
  border-radius: var(--ceweb-coordonnees-badge-radius);
  line-height: 1;
}

/* Trois classes : à (0,1,1), la règle égale celles d'Elementor sur les SVG en
   ligne, et la feuille d'Elementor, chargée après, gagnerait l'égalité — le
   piège documenté pour « Engagements ». Les pictogrammes du plugin sont au
   trait ; une icône Elementor (police ou SVG) se remplit. */
.ceweb-coordonnees .ceweb-coordonnees__badge .ceweb-coordonnees__glyph{
  display: block;
  width: var(--ceweb-coordonnees-icon-size);
  height: var(--ceweb-coordonnees-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ceweb-coordonnees-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ceweb-coordonnees .ceweb-coordonnees__item .ceweb-coordonnees__badge svg:not(.ceweb-coordonnees__glyph){
  display: block;
  width: var(--ceweb-coordonnees-icon-size);
  height: var(--ceweb-coordonnees-icon-size);
  max-width: 100%;
  max-height: 100%;
  fill: currentColor;
}
.ceweb-coordonnees .ceweb-coordonnees__item .ceweb-coordonnees__badge i{
  font-size: var(--ceweb-coordonnees-icon-size);
  line-height: 1;
  color: inherit;
}

/* ============================================================
   Libellé et valeur
   ============================================================ */
.ceweb-coordonnees__body{
  display: flex;
  flex-direction: column;
  gap: var(--ceweb-coordonnees-label-gap);
  min-width: 0;
  /* Centre optiquement le libellé et la valeur sur la pastille quand la
     valeur tient sur une ligne ; une adresse sur deux lignes descend. */
  padding-top: 1px;
}

.ceweb-coordonnees .ceweb-coordonnees__item .ceweb-coordonnees__label{
  display: block;
  margin: 0;
  color: var(--ceweb-coordonnees-label, var(--ceweb-coordonnees-label-auto));
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: inherit;
}

/* La valeur est un `<a>` quand la ligne a un lien, un `<span>` sinon : le même
   sélecteur long couvre les deux, et bat les `a` du thème (couleur,
   soulignement, couleur au survol). */
.ceweb-coordonnees .ceweb-coordonnees__item .ceweb-coordonnees__value{
  display: block;
  margin: 0;
  color: var(--ceweb-coordonnees-value, var(--ceweb-coordonnees-value-auto));
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  text-align: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  box-shadow: none;
}
.ceweb-coordonnees .ceweb-coordonnees__item .ceweb-coordonnees__value:hover,
.ceweb-coordonnees .ceweb-coordonnees__item .ceweb-coordonnees__value:focus{
  color: var(--ceweb-coordonnees-value, var(--ceweb-coordonnees-value-auto));
  text-decoration: none;
}

/* Le lien est étiré sur toute la rangée : pastille et libellé deviennent
   cliquables, sans imbriquer de bloc dans le `<a>`. L'anneau de focus est
   dessiné sur cette zone, pas autour du seul texte. */
.ceweb-coordonnees__value::after{
  content: "";
  position: absolute;
  inset: -10px -14px;
  border-radius: 14px;
}
.ceweb-coordonnees .ceweb-coordonnees__item .ceweb-coordonnees__value:focus{ outline: none; }
.ceweb-coordonnees .ceweb-coordonnees__item .ceweb-coordonnees__value:focus-visible::after{
  outline: 2px solid var(--ceweb-coordonnees-focus-auto);
  outline-offset: 0;
}

.ceweb-coordonnees__sr{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Survol

   Tout est sous `.ceweb-coordonnees--hover`, que PHP ne pose que si le
   réglage est actif, et seules les lignes qui portent un lien (`is-link`)
   réagissent : un horaire ou une adresse sans lien ne promet aucun clic.
   ============================================================ */
.ceweb-coordonnees--hover .is-link .ceweb-coordonnees__row::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px -14px;
  background: var(--ceweb-coordonnees-tint-auto);
  border-radius: 14px;
  opacity: 0;
  transition: opacity var(--ceweb-coordonnees-duration) var(--ceweb-coordonnees-ease);
  pointer-events: none;
}
.ceweb-coordonnees--hover .is-link .ceweb-coordonnees__badge{
  transition: box-shadow var(--ceweb-coordonnees-duration) var(--ceweb-coordonnees-ease);
}
.ceweb-coordonnees--hover .ceweb-coordonnees__item .ceweb-coordonnees__value{
  transition: color var(--ceweb-coordonnees-duration) var(--ceweb-coordonnees-ease);
}

.ceweb-coordonnees--hover .is-link .ceweb-coordonnees__row:hover::before,
.ceweb-coordonnees--hover .is-link .ceweb-coordonnees__row:focus-within::before{
  opacity: 1;
}
.ceweb-coordonnees--hover .is-link .ceweb-coordonnees__row:hover .ceweb-coordonnees__badge,
.ceweb-coordonnees--hover .is-link .ceweb-coordonnees__row:focus-within .ceweb-coordonnees__badge{
  box-shadow: 0 0 0 4px var(--ceweb-coordonnees-ring-auto);
}
.ceweb-coordonnees.ceweb-coordonnees--hover .is-link .ceweb-coordonnees__row:hover .ceweb-coordonnees__value,
.ceweb-coordonnees.ceweb-coordonnees--hover .is-link .ceweb-coordonnees__row:focus-within .ceweb-coordonnees__value{
  color: var(--ceweb-coordonnees-value-hover, var(--ceweb-coordonnees-value-hover-auto));
}

@media (prefers-reduced-motion: reduce){
  .ceweb-coordonnees *,
  .ceweb-coordonnees *::before{ transition: none !important; }
}

/* ============================================================
   Empilement

   Ces règles redéfinissent la seule variable des colonnes : aucune dispute de
   spécificité possible. Le titre rétrécit comme celui du formulaire de
   contact sous 640 px — une valeur du group control Typographie l'emporte.
   ============================================================ */
@media (max-width: 1024px){
  .ceweb-coordonnees--stack-tablet{ --ceweb-coordonnees-cols: minmax(0, 1fr); }
}

@media (max-width: 767px){
  .ceweb-coordonnees--stack-mobile{ --ceweb-coordonnees-cols: minmax(0, 1fr); }
}

@media (max-width: 640px){
  .ceweb-coordonnees{ --ceweb-coordonnees-title-size: 27px; }
}