/*
 * AXEK Elements – Contact · Panneau RDV (par 6LEX – https://6lex.co)
 * Panneau (bleu nuit + arcs) pour la colonne GAUCHE de la page contact :
 * bloc RENDEZ-VOUS mis EN AVANT en premier, puis coordonnées (bureaux · mail · réseaux).
 * NB bouton « .axek-cp-book » (ni -btn ni -cta) + couleur en double-classe pour
 *    échapper aux resets de base.css.
 */
.axek-cp{
	--cp-ink:#fff; --cp-muted:rgba(255,255,255,.72); --cp-line:var(--ax-filet-sombre);
	--cp-tile:rgba(255,255,255,.1);
	/* Le panneau est bleu nuit : le bouton principal reste TERRACOTTA, comme
	   le héros et le CTA du footer. Il ne s'inverse en blanc que sur
	   l'ambiance terracotta, où le terracotta serait invisible. */
	--cp-book-bg:var(--axk-btn-terra); --cp-book-bg-h:var(--axk-btn-terra-hd); --cp-book-ink:#fff;
	position:relative; overflow:hidden; border-radius:26px; padding:44px 42px;
	background-color:var(--ax-nuit-fond);
	background-image:radial-gradient(120% 130% at 84% 0%,var(--ax-nuit-halo),var(--ax-nuit) 46%,var(--ax-nuit-fond) 100%);
	color:var(--cp-ink);
}
.axek-cp, .axek-cp *{ box-sizing:border-box; }

/* ---- ambiances (même logique que le héros / la bande CTA) ---- */
/* bleu nuit = défaut (déjà sur .axek-cp) */
.axek-cp--terra{ background-color:var(--ax-terra-fond); background-image:radial-gradient(120% 130% at 84% 0%,var(--ax-terra-halo),var(--ax-terra) 46%,var(--ax-terra-fond) 100%); }
/* Ambiance terracotta : seul cas d'inversion du bouton. */
.axek-cp--terra{ --cp-book-bg:#fff; --cp-book-bg-h:#fff; --cp-book-ink:var(--axk-btn-terra); }

/* ---- épouse la hauteur de la colonne voisine (formulaire) ---- */
.axek-cp--fill{ height:100%; }
.axek-cp--fill .axek-cp-in{ display:flex; flex-direction:column; height:100%; }
/* réparti : le bloc RDV reste en haut, les coordonnées descendent en bas */
.axek-cp--fill.axek-cp--spread .axek-cp-in{ justify-content:space-between; }
.axek-cp-rings{ position:absolute; top:-140px; right:-140px; width:420px; height:420px; z-index:0; pointer-events:none; }
.axek-cp-rings circle{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:1.3; }
.axek-cp-in{ position:relative; z-index:1; }

/* ---- bloc RENDEZ-VOUS (en avant, en premier) ---- */
.axek-cp-rdv-title.axek-cp-rdv-title{ margin:0; font-weight:600; font-size: var(--ax-bloc); letter-spacing: -.02em; color:var(--cp-ink); line-height: 1.2;}
.axek-cp-rdv-text{ margin:10px 0 20px; font-size: var(--ax-second); line-height: 1.55; color:var(--cp-muted); max-width:34ch; font-weight: 500;}
.axek-cp-book{ display:inline-flex; align-items:center; gap:9px; background:var(--cp-book-bg); font-weight:600; font-size:var(--axk-btn-md-fs); padding:var(--axk-btn-md-pad); border-radius:var(--axk-btn-radius); text-decoration:none; transition:background var(--axk-btn-dur) var(--axk-ease), box-shadow var(--axk-btn-dur) var(--axk-ease), transform var(--axk-btn-dur) var(--axk-ease); }
/* Couleur du texte verrouillée dans TOUS les états : sans le :hover explicite,
   le kit global d'Elementor (.elementor-kit-N a:hover = 0,2,1) reprend la main
   et repeint le libellé en blanc — invisible sur le bouton blanc. */
.axek-cp-book.axek-cp-book,
.axek-cp-book.axek-cp-book:hover,
.axek-cp-book.axek-cp-book:focus,
.axek-cp-book.axek-cp-book:active{ color:var(--cp-book-ink); }
.axek-cp-book svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; flex:none; }
/* Bouton blanc sur fond sombre : il ne peut que s'ASSOMBRIR au survol.
   L'ancien brightness(1.03) éclaircissait un blanc = aucun retour visible. */
@media (hover:hover){
	.axek-cp-book:hover{ background:var(--cp-book-bg-h); transform:translateY(var(--axk-btn-lift)); }
	/* bouton blanc (ambiance terracotta) : il ne peut que s'assombrir */
	.axek-cp--terra .axek-cp-book:hover{ box-shadow:var(--axk-btn-lift-shadow); }
}
.axek-cp-book:active{ transform:translateY(0) scale(var(--axk-btn-press)); }
.axek-cp-book:focus-visible{ outline:2px solid var(--axk-btn-focus); outline-offset:2px; }
.axek-cp-book:active{ transform:translateY(0) scale(.97); }

.axek-cp-div{ height:1px; background:var(--cp-line); border:0; margin:34px 0; }

/* ---- bloc CONTACT (dessous) ---- */
.axek-cp-h.axek-cp-h{ margin:0 0 22px; font-weight:600; font-size: var(--ax-meta); text-transform:uppercase; letter-spacing: .16em; color:var(--cp-muted); line-height: 1.45;}
.axek-cp-offices{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:22px; }
.axek-cp-office{ display:flex; gap:14px; }
/* Icônes NUES par défaut : la pastille faisait une boîte inutile autour du
   repère. Réactivable par le réglage « Pastille derrière les icônes ». */
.axek-cp-office .ic{ flex:none; width:38px; height:38px; border-radius:11px; background:var(--cp-tile); display:flex; align-items:center; justify-content:center; margin-top:2px; }
/* Pastille retirée à la demande : le repère redevient une icône nue. */
.axek-cp--notile .axek-cp-office .ic{ width:22px; height:22px; background:transparent; }
.axek-cp-office .ic svg{ width:18px; height:18px; stroke:var(--cp-ink); fill:none; stroke-width:1.7; }
.axek-cp-office b{ display:block; font-weight: 500; font-size: var(--ax-corps); margin-bottom:4px; color:var(--cp-ink); line-height: 1.6;}
.axek-cp-office span{ display:block; font-size: var(--ax-meta); line-height: 1.45; color:var(--cp-muted); }
/* Plusieurs numéros par bureau : ils s'empilent, chacun cliquable, et la
   pastille reste alignée en haut. `align-items:flex-start` évite que le
   soulignement ne coure sur toute la largeur de la colonne. */
.axek-cp-phones{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-top:6px; }
.axek-cp-office a{ display:inline-block; font-size: var(--ax-meta); color:var(--cp-ink); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:1px; transition:border-color var(--axk-dur) var(--axk-ease); line-height: 1.45;}
.axek-cp-office a:hover{ border-color:var(--cp-ink); }
/* Plusieurs adresses : UNE enveloppe, puis les adresses empilées à côté. */
.axek-cp-mails{ display:flex; align-items:flex-start; gap:10px; }
.axek-cp-mailico{ flex:none; display:flex; align-items:center; height:23px; color:var(--cp-ink); }
.axek-cp-mailico svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; opacity:.85; display:block; }
.axek-cp-maillist{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; }
.axek-cp-mail{ display:inline-block; color:var(--cp-ink); text-decoration:none; font-size: var(--ax-second); font-weight: 500; line-height: 1.55; word-break:break-word; }
/* Pas de souligné : c'est la couleur qui signale le survol. */
.axek-cp-mail:hover{ color: var(--ax-terra); }
.axek-cp-social{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
/* Réseaux : icônes NUES — ni contour, ni fond, au repos comme au survol.
   Le seul retour est le soulèvement. La boîte 40x40 reste (invisible) pour
   garder une zone de clic confortable au doigt. */
.axek-cp-social a{ width:40px; height:40px; border:0; background:none; display:inline-flex; align-items:center; justify-content:center; color:var(--cp-ink); text-decoration:none; transition:transform var(--axk-btn-dur) var(--axk-ease); }
.axek-cp-social a:hover{ transform:translateY(var(--axk-btn-lift)); }
.axek-cp-social a:active{ transform:translateY(0) scale(var(--axk-btn-press)); }
.axek-cp-social svg{ width:17px; height:17px; fill:currentColor; }
.axek-cp-social i{ font-size: var(--ax-chapo); line-height: 1.55; font-weight: 500;}

@media (max-width:640px){ .axek-cp{ padding:34px 26px; border-radius:22px; } }

/* ---------- ZONES DE TOUCHE ----------
   Au doigt, ce qui se touche doit faire au moins 40 px. Téléphone ET tablette :
   le pointeur grossier ("pointer: coarse") attrape aussi les hybrides tactiles,
   la largeur attrape les tablettes que le navigateur déclare fines. On agrandit la
   ZONE, jamais le dessin : marge intérieure verticale sur les liens en ligne,
   carré plein sur les icônes. Pas de pseudo-élément qui déborderait sur le
   voisin : deux zones de touche ne doivent jamais se chevaucher. */
@media (max-width: 1024px), (pointer: coarse){
	/* Le numéro porte son soulignement en `border-bottom` collé au texte.
	   Une marge symétrique décollerait le filet de 12 px. La zone grandit donc
	   vers le HAUT, et l'écart de la pile lui est rendu : sans ça les deux
	   s'additionnent. */
	.axek-cp-phones{ gap: 0; margin-top: 0; }
	.axek-cp-office a{ padding-top: 21px; padding-bottom: 1px; display: inline-block; }
	/* L'adresse e-mail n'a pas de filet : marge des deux côtés, et l'écart de
	   la pile passe dans la marge. */
	.axek-cp-maillist{ gap: 0; }
	.axek-cp-mail{ padding-block: 9px; display: inline-block; }
	/* L'enveloppe se cale sur la hauteur d'une ligne : le lien ayant grandi,
	   elle resterait perchée en haut. On lui donne la hauteur du lien. */
	.axek-cp-mailico{ height: 41px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SANS FOND
   Pas une troisième couleur : l'absence de carte. Le bloc se pose à même
   la page, et ce qui séparait par un aplat sépare désormais par un filet.
   L'encre repasse en sombre, le bouton redevient terracotta plein.
   ═══════════════════════════════════════════════════════════════════════ */
.axek-cp--nu{
	--cp-ink:var(--ax-encre);
	--cp-muted:var(--ax-texte-doux);
	--cp-line:var(--ax-filet);
	/* Le survol suit la règle du site : sur fond CLAIR on FONCE, pour se
	   détacher du fond au lieu de s'y fondre. Sans cette ligne, le bloc
	   héritait du survol des fonds SOMBRES et le bouton s'éclaircissait
	   sur du blanc, ce qui l'effaçait. */
	--cp-book-bg:var(--axk-btn-terra); --cp-book-bg-h:var(--axk-btn-terra-h);
	--cp-book-ink:#fff;
	background:none; border-radius:0; padding:0; overflow:visible;
	color:var(--cp-ink);
}
/* Le filet du registre est un cran plus clair que celui du site : sur du
   blanc et à cette densité, --ax-filet fait encore barreau. Sur un écran
   retina on demande un demi-pixel, soit UN pixel physique, le trait le plus
   fin qu'un écran sache tracer ; ailleurs on garde 1 px, sinon certains
   navigateurs l'arrondissent à zéro et il disparaît. */
.axek-cp--nu{ --cp-trait:var(--ax-filet-fin); }
/* On mesure le bloc, pas la fenêtre : le registre peut être large sur un
   grand écran (bande pleine largeur) comme étroit (colonne du rendez-vous).
   Une @media répondrait à la mauvaise question. */
.axek-cp{ container-type:inline-size; }

/* Même rôle que « Prenez rendez-vous » : --ax-bloc. Ce sont trois blocs de
   même rang sur la page, pas deux blocs et une annexe. */
/* Le registre suit le bloc du rendez-vous : sans respiration il venait
   coller au bouton, à zéro pixel. Deux intentions différentes doivent
   s'éloigner l'une de l'autre, faute d'un filet pour les séparer. */
.axek-cp--nu .axek-cp-reg{ margin-top:52px; }
.axek-cp-reg-t.axek-cp-reg-t{
	font-size:var(--ax-bloc); font-weight:600; letter-spacing:-.02em;
	line-height:1.2; color:var(--ax-encre); margin:0 0 22px;
}
/* Ville · adresse · téléphones.
   L'ADRESSE N'EST PAS GRISE. C'est du contenu : quelqu'un la lit pour venir.
   Elle était en --ax-texte-doux, un gris posé par réflexe pour « faire
   secondaire ». La hiérarchie vient d'ailleurs : la ville porte par sa
   graisse, le numéro appelle par sa couleur, l'adresse se tient entre les
   deux en graisse normale. Aucun gris n'est nécessaire pour ça. */
.axek-cp-reg-l{
	display:grid; grid-template-columns:1.05fr 1.5fr 1.45fr; gap:26px;
	padding:20px 0; border-top:1px solid var(--cp-trait); align-items:baseline;
}
@media (min-resolution:2dppx){ .axek-cp-reg-l{ border-top-width:.5px; } }
/* TROIS RÔLES DU SITE, PAS TROIS BRICOLAGES.
   L'adresse était en graisse 400 : une valeur qui n'existe dans aucun rôle
   de l'échelle, inventée pour fabriquer une hiérarchie une fois le gris
   retiré. Toute l'échelle du site est en 500 pour le texte, 600 pour les
   titres. La différence vient donc de la TAILLE, qui elle est un rôle :
   la ville en Corps, l'adresse et le numéro en Corps secondaire. */
.axek-cp-reg-l p{ margin:0; font-weight:500; color:var(--ax-encre); }
.axek-cp-reg-v{ font-size:var(--ax-corps); line-height:1.6; }
.axek-cp-reg-a{ font-size:var(--ax-second); line-height:1.55; }
.axek-cp-reg-p{ font-size:var(--ax-second); line-height:1.55; }
.axek-cp-reg-l a{ color:var(--ax-terra); text-decoration:none; font-weight:500; }
.axek-cp-reg-p a + a{ margin-left:15px; }
@media (hover:hover){ .axek-cp-reg-l a:hover{ color:var(--axk-btn-terra-h); } }

/* Sans fond, les réseaux se rangent sous un filet comme le reste. */
/* Pas de filet au-dessus des réseaux : l'espace suffit, et la page en a
   déjà un (le vertical entre les colonnes). */
.axek-cp--nu .axek-cp-contact{ margin-top:30px; }
/* RÉSEAUX : le footer fait foi.
   Relevé chez lui : icône 20 px, écart 20 px, couleur --ax-texte-doux, aucune
   boîte autour. Le panneau avait 17 px, 12 px d'écart et une boîte de 40 :
   trois écarts pour une même chose vue sur la même page. La boîte de 40
   revient au doigt, comme au footer. */
.axek-cp--nu .axek-cp-social{ gap:20px; }
.axek-cp--nu .axek-cp-social a{ width:auto; height:auto; color:var(--ax-texte-doux); }
/* Le réglage de couleur d'Elementor sort en (0,4,0) : il passe devant
   cette règle sans qu'on ait à la baisser. */
.axek-cp--nu .axek-cp-social a svg{ width:20px; height:20px; display:block; }
@media (hover:hover){
	.axek-cp--nu .axek-cp-social a:hover{ color:var(--ax-terra); transform:translateY(-2px); }
}
@media (max-width: 1024px), (pointer: coarse){
	.axek-cp--nu .axek-cp-social a{ min-width:44px; min-height:44px;
		justify-content:center; }
}

/* Empilé, un filet par ligne fait trois traits pour deux bureaux : l'espace
   sépare aussi bien et la colonne respire. Les filets ne reviennent que
   lorsque le registre a la place de s'aligner en colonnes. */
/* Seuil relevé après coup : à 570 px, les trois colonnes passaient mais
   l'adresse se brisait sur trois lignes. On ne colonne qu'à partir de la
   largeur où ça se lit, mesurée sur la vraie adresse la plus longue. */
@container (max-width: 700px){
	.axek-cp-reg-l{ grid-template-columns:1fr; gap:5px; border-top:0;
		padding-block:0; margin-bottom:24px; }
	.axek-cp-reg-l:last-child{ margin-bottom:0; }
	.axek-cp-reg-p a{ display:inline-block; }
}

/* ---------- ZONES DE TOUCHE ----------
   Au doigt, ce qui se touche doit faire au moins 40 px. Téléphone ET tablette.
   La marge du lien REMPLACE une partie de l'espace de la rangée : ajoutée
   par-dessus, l'écart perçu doublerait et le registre bâillerait. */
@media (max-width: 1024px), (pointer: coarse){
	.axek-cp-reg-l{ padding-block: 12px; }
	.axek-cp-reg-l a{ padding-block: 12px; display: inline-block; }
	.axek-cp-reg-p a + a{ margin-left: 0; }
	.axek-cp-reg-p a{ margin-right: 15px; }
}