/*
Theme Name: Institutionnel Premium (ambassy2)
Description: Habillage "Institutionnel Premium" (couleurs Côte d'Ivoire, armoiries, typographie) appliqué par-dessus le thème Hello Elementor. Remplace l'en-tête, la navigation et le pied de page par une version identique aux maquettes validées, et redessine les 6 parcours (accueil/connexion, chancelleries, fiche ambassade, contact, choix de la chancellerie, mes demandes) à l'identique de ces maquettes — sans jamais modifier les fichiers des extensions consulaires : toute la logique (données WooCommerce, paniers, comptes, formulaires) reste celle des extensions d'origine, seul le gabarit visuel change. Pour revenir instantanément à l'apparence d'origine, réactiver "Hello Elementor" depuis Apparence > Thèmes.
Template: hello-elementor
Version: 2.0
Author: Isaac / Claude
Text Domain: institutionnel-premium
*/

* { box-sizing: border-box; }
html { overflow-x: hidden; }

:root{
	--csl-orange:#E8720C;
	--csl-orange-dark:#C65A00;
	--csl-green:#0B6B3A;
	--csl-green-deep:#084F2B;
	--csl-paper:#FBF8F2;
	--csl-ink:#1C2620;
	--csl-ink-soft:#5b6b60;
	--csl-line:#eee5d4;
	--csl-muted:#9a8f7e;
	--csl-radius-sm:5px;
	--csl-font-heading: Georgia, 'Times New Roman', serif;
	--csl-font-body: 'Helvetica Neue', Arial, sans-serif;
}

/* =========================================================
   Base
   ========================================================= */
body{
	-webkit-font-smoothing: antialiased;
	background: var(--csl-paper) !important;
	color: var(--csl-ink);
	font-family: var(--csl-font-body) !important;
	/* Empêche toute barre de défilement horizontale parasite due aux sections
	   "plein écran" (ex. .hero) qui débordent volontairement de #content via 100vw. */
	overflow-x: hidden;
}
img { max-width: 100%; }

h1, h2, h3,
.elementor-heading-title,
.woocommerce-account .woocommerce h2,
.woocommerce form.login h2,
.woocommerce form.register h2 {
	font-family: var(--csl-font-heading) !important;
	font-weight: 400 !important;
	color: var(--csl-ink);
}

/* Titres de page WordPress masqués (bandeau déjà géré par nos propres gabarits) */
.page .entry-title,
.page .elementor-page-title,
.page h1.entry-title {
	display: none !important;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* =========================================================
   En-tête / navigation / pied de page — remplacement complet
   (depuis la Phase 3 du 13 août 2026 : les gabarits Elementor Theme
   Builder "header1"/"footer" sont passés en Brouillon et l'en-tête/pied
   de page par défaut du thème Hello Elementor est désactivé à la source
   (Hello > Réglages > Structure et mise en page) — plus aucun des deux
   ne peut être rendu, donc plus besoin de règle CSS pour les masquer ;
   nos propres gabarits restent injectés à leur place via
   wp_body_open / wp_footer, comme avant)
   ========================================================= */

.topbar { height: 6px; background: linear-gradient(90deg, var(--csl-orange) 0 33.3%, #ffffff 33.3% 66.6%, var(--csl-green) 66.6% 100%); }

header.ip-header { background: #fff; border-bottom: 1px solid var(--csl-line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; }
/* Bannière du Ministère (à gauche de l'en-tête depuis le 14 août 2026,
   réorganisation demandée par Isaac — voir inc/overrides.php du thème). */
.brand-ministry { display: flex; align-items: center; }
.brand-ministry img { height: 62px; width: auto; display: block; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { width: 44px; height: auto; display: block; }
.brand .t1 { font-size: 11px; letter-spacing: 0.12em; color: var(--csl-green-deep); font-weight: 700; text-transform: uppercase; }
.brand .t2 { font-family: var(--csl-font-heading); font-size: 16px; color: var(--csl-ink); margin-top: 2px; }
.head-actions { display: flex; align-items: center; gap: 22px; font-size: 13px; }
.head-actions a { color: var(--csl-green-deep); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.head-actions .lang { color: var(--csl-muted); font-weight: 600; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--csl-orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.user-chip .lang { color: var(--csl-muted); margin-left: 14px; }
/* Drapeau du sélecteur de langue (csl_lang_switcher(), 14 août 2026 —
   remplace l'ancien libellé texte "FR ▾"). */
.lang { display: inline-flex; align-items: center; gap: 6px; }
.lang-flag { width: 20px; height: auto; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }

.navbar { background: var(--csl-green-deep); }
.navbar .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.navbar nav { display: flex; flex-wrap: wrap; }
.navbar a { color: #dfeee4; text-decoration: none; font-size: 14px; padding: 16px 20px; display: inline-flex; align-items: center; gap: 8px; border-bottom: 3px solid transparent; }
.navbar a:hover { color: #fff; background: rgba(255,255,255,0.06); border-bottom-color: var(--csl-orange); }
.navbar a.active { color: #fff; font-weight: 700; border-bottom-color: var(--csl-orange); background: rgba(255,255,255,0.04); }
/* [consulaire_compte] (liens Se connecter/S'enregistrer, ou bloc utilisateur
   connecté) intégré à droite de la barre verte depuis le 14 août 2026 (il
   vivait auparavant dans l'en-tête blanc, voir inc/overrides.php du thème).
   Ce bloc est stylé par défaut pour un fond blanc (.head-actions/.user-chip
   ci-dessus) : on surcharge ici ses couleurs pour rester lisible sur le
   fond vert foncé de la barre de navigation. */
.navbar-actions { display: flex; align-items: center; padding: 14px 20px; }
.navbar-actions .head-actions a,
.navbar-actions .head-actions .lang,
.navbar-actions .user-chip { color: #dfeee4; }
.navbar-actions .head-actions a:hover { color: #fff; }
.navbar-actions .user-chip a { color: #dfeee4 !important; }
.navbar-actions .user-chip a:hover { color: #fff !important; }

/* Pied de page — refonte du 14 août 2026 (voir inc/overrides.php du thème
   pour le HTML). margin-top: 0 volontairement : Isaac a demandé qu'il n'y
   ait plus d'espace blanc entre le contenu de la page et le pied de page. */
footer.ip-footer { background: var(--csl-green-deep); color: rgba(255,255,255,0.7); margin-top: 0; border-top: 3px solid var(--csl-orange); }
.footer-main { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 40px; padding: 44px 40px 36px; }
/* Bloc armoiries + texte (14 août 2026 : remis à la place de la bannière
   du Ministère, à la demande d'Isaac — plus besoin de fond blanc, les
   armoiries se lisent bien directement sur le vert foncé). */
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 44px; height: auto; display: block; }
.footer-brand-t1 { color: #fff; font-family: var(--csl-font-heading); font-size: 15px; font-weight: 600; }
.footer-brand-t2 { color: rgba(255,255,255,0.65); font-size: 12px; margin-top: 2px; max-width: 320px; line-height: 1.5; }
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col-title { color: var(--csl-orange); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.footer-col a { display: block; color: rgba(255,255,255,0.85); text-decoration: none; font-size: 13px; margin-bottom: 10px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 18px 40px; text-align: center; font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); text-transform: uppercase; }

/* =========================================================
   Composants partagés (cartes, boutons, bandeaux)
   ========================================================= */
.card { background: #fff; border: 1px solid var(--csl-line); border-radius: 8px; box-shadow: 0 1px 3px rgba(28,38,32,0.05); }
.card-accent { position: relative; overflow: hidden; }
.card-accent::before { content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--csl-orange), var(--csl-green)); }

.eyebrow-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--csl-orange); background: rgba(232,114,12,0.08); padding: 5px 12px; border-radius: 20px; margin-bottom: 12px; }

a.cta, button.cta, input.cta[type=submit] { font-family: inherit; display: inline-flex; align-items: center; gap: 10px; background: var(--csl-orange); color: #fff; padding: 14px 26px; border: none; border-radius: 4px; font-size: 14px; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; box-shadow: 0 8px 22px rgba(232,114,12,0.3); cursor: pointer; }
a.cta:hover, button.cta:hover, input.cta[type=submit]:hover { background: var(--csl-orange-dark); color: #fff; }
.cta.deep { background: var(--csl-green-deep) !important; box-shadow: 0 8px 22px rgba(8,79,43,0.25) !important; }
.cta.deep:hover { background: var(--csl-green) !important; }
.cta.small { padding: 10px 18px; font-size: 12px; box-shadow: none; }

.section { padding: 56px 40px 60px; max-width: 1200px; margin: 0 auto; }
.section h1 { font-size: 30px; color: var(--csl-green-deep); margin-bottom: 10px; }
.section .sub { font-size: 14px; color: var(--csl-muted); max-width: 720px; line-height: 1.6; margin-bottom: 30px; }

/* =========================================================
   Accueil / connexion (hero + carte de connexion)
   ========================================================= */
.hero {
	/* Le fond vert doit couvrir toute la largeur de l'écran, alors que la page
	   (#content, gabarit Hello Elementor) est centrée avec un max-width : on
	   fait "déborder" volontairement la section hors de ce conteneur. */
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: radial-gradient(circle at 15% 20%, #0e7a44 0%, var(--csl-green) 45%, var(--csl-green-deep) 100%);
	padding: 70px 40px 90px;
	overflow: hidden;
}
.hero::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 34px); pointer-events: none; }

/* Page "Enregistrement" (/enregistrement/, id 919) : section Elementor qui
   servait de fond de photo derrière le titre — remplacée par le même
   dégradé vert que .hero, à la demande d'Isaac (14 août 2026). Cette page
   reste construite avec Elementor (contrairement à Accueil/Chancelleries/
   Contact, voir doc projet §15.12/§15.20) : on surcharge donc uniquement
   le fond en CSS, sans toucher au contenu Elementor de la page. */
.page-id-919 .elementor-element-7b342791 {
	background-image: radial-gradient(circle at 15% 20%, #0e7a44 0%, var(--csl-green) 45%, var(--csl-green-deep) 100%) !important;
}
.hero-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; position: relative; }
.hero .eyebrow { color: var(--csl-orange); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 700; margin-bottom: 18px; }
.hero h1 { font-size: 40px; line-height: 1.2; color: #fff !important; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: #FBCB8A; }
.hero p { font-size: 15px; line-height: 1.7; color: #dfeee4; max-width: 480px; }
.login-card { background: #fff; border-radius: 8px; padding: 34px 36px; box-shadow: 0 24px 50px rgba(0,0,0,0.22); }
.login-card h2 { font-size: 19px; color: var(--csl-green-deep) !important; margin-bottom: 22px; }
.login-card .field,
.login-card p.login-username, .login-card p.login-password { margin-bottom: 18px; }
.login-card label,
.login-card .login-username label, .login-card .login-password label { display: block; font-size: 12px; font-weight: 700; color: var(--csl-ink); margin-bottom: 8px; }
.login-card input[type=text], .login-card input[type=password],
.login-card .login-username input, .login-card .login-password input { width: 100%; border: 1px solid #ddd3c0; border-radius: 5px; padding: 12px 14px; font-size: 14px; background: #fdfcfa; font-family: inherit; box-sizing: border-box; }
.login-card .remember, .login-card .login-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b6154; margin: 4px 0 20px; }
.login-card .cta, .login-card .login-submit input[type=submit] { width: 100%; justify-content: center; margin-bottom: 14px; text-align: center; text-transform: none !important; letter-spacing: normal !important; font-weight: 700 !important; }
.login-card .forgot, .login-card .cl-links { font-size: 13px; color: #6b6154; }
.login-card .forgot a, .login-card .cl-links a { color: var(--csl-orange-dark); font-weight: 600; text-decoration: none; }
.login-card .register-box { background: var(--csl-paper); border: 1px solid var(--csl-line); border-radius: 6px; padding: 18px 20px; margin-top: 22px; font-size: 13px; color: #6b6154; line-height: 1.6; }
.login-card .register-box .cta { margin-top: 12px; width: 100%; justify-content: center; }

/* =========================================================
   Chancelleries (grille par continent)
   ========================================================= */
.tabs { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.tabs a { font-size: 14px; font-weight: 600; padding: 10px 22px; border-radius: 5px; text-decoration: none; color: var(--csl-green-deep); background: #fff; border: 1px solid var(--csl-line); }
.tabs a.active { background: var(--csl-green-deep); color: #fff; border-color: var(--csl-green-deep); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-bottom: 20px; }
a.country-card, .country-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; text-decoration: none !important; }
.country-card .flag { width: 34px; height: 24px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); object-fit: cover; }
.country-card .name { font-size: 14px; font-weight: 700; color: var(--csl-orange-dark); text-decoration: none !important; }
.country-card .city { font-size: 12px; color: var(--csl-muted); margin-top: 2px; }
@media(max-width:1000px){ .grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px){ .grid{ grid-template-columns: 1fr; } }

/* =========================================================
   Fiche chancellerie (ambassade_fiche + tableau_tarifs)
   ========================================================= */
.fiche-head { padding: 30px 34px; margin-bottom: 26px; }
.fiche-head .top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.fiche-head .flag-lg { width: 52px; height: 36px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); flex-shrink: 0; object-fit: cover; }
.fiche-head h1 { font-size: 24px; color: var(--csl-ink); margin: 0; }
.fiche-head .meta { font-size: 13px; color: var(--csl-muted); border-top: 1px solid var(--csl-line); padding-top: 14px; }
.fiche-head .meta b { color: var(--csl-ink); }
.fiche-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.side-card { padding: 26px; }
.side-card .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--csl-orange-dark); margin-bottom: 4px; }
.side-card h3 { font-size: 18px; color: var(--csl-green-deep) !important; margin-bottom: 6px; }
.side-card .hint { font-size: 12.5px; color: var(--csl-muted); margin-bottom: 18px; line-height: 1.5; }
.cat-list { list-style: none; margin: 0 0 22px; padding: 0; }
.cat-list li { margin-bottom: 4px; }
.cat-list a.af-cat { display: block; font-size: 13.5px; padding: 10px 12px; border-radius: 5px; text-decoration: none !important; color: var(--csl-ink) !important; font-weight: 600; }
.cat-list a.af-cat.active, .cat-list a.af-cat:hover { background: rgba(232,114,12,0.08); color: var(--csl-orange-dark) !important; }
.svc-table { overflow: hidden; }
.svc-table .thead-title { padding: 18px 24px; border-bottom: 1px solid var(--csl-line); font-family: var(--csl-font-heading); font-size: 18px; color: var(--csl-green-deep); background: var(--csl-paper); }
.svc-table table { width: 100%; border-collapse: collapse; }
.svc-table th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csl-muted); font-weight: 700; padding: 14px 24px; border-bottom: 1px solid var(--csl-line); }
.svc-table td { padding: 16px 24px; font-size: 14px; border-bottom: 1px solid #f4efe4; vertical-align: top; }
.svc-table tr:last-child td { border-bottom: none; }
.svc-table td.docs a, .svc-table td .af-doc-toggle, .svc-table .tt-doclink { color: var(--csl-green-deep) !important; font-weight: 600; text-decoration: none !important; font-size: 13px; }
.svc-table td.price, .svc-table td.price a { text-align: right; font-weight: 700; color: var(--csl-ink) !important; white-space: nowrap; text-decoration: none !important; }
.svc-table .svc-name { font-weight: 700; color: var(--csl-ink) !important; text-decoration: none !important; }
.svc-table .af-pane { display: none; }
.svc-table .af-pane.active { display: block; }
.svc-table .af-doc-list { display: none; margin: 8px 0 0 4px; padding-left: 16px; font-size: 13px; color: #666; }
.svc-table .af-doc.open .af-doc-list { display: block; }
/* Contenu des pop-up "Liste des documents à fournir" (#af-modal / #tt-modal) — le HTML vient
   tel quel du site officiel (titres, listes numérotées, sous-groupes), voir §21 doc projet. */
.af-modal-content, .tt-modal-content { font-size: 14px; line-height: 1.65; color: #444; }
.af-modal-content ul, .tt-modal-content ul,
.af-modal-content ol, .tt-modal-content ol { margin: 4px 0 14px; padding-left: 22px; }
.af-modal-content li, .tt-modal-content li { margin-bottom: 6px; }
.af-modal-content p, .tt-modal-content p { margin: 18px 0 10px; }
.af-modal-content p:first-child, .tt-modal-content p:first-child { margin-top: 0; }
.svc-table td .tt-qty { width: 70px; padding: 8px; border: 1px solid var(--csl-line); border-radius: 3px; text-align: center; font-family: inherit; }
@media(max-width:820px){ .fiche-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   Choix de la chancellerie (connecté)
   ========================================================= */
.cc-wrap { max-width: 1040px; }
.choix-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: stretch; margin-bottom: 24px; }
.choix-card { padding: 34px 38px; }
.choix-card .crumb { font-size: 11.5px; color: var(--csl-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.choix-card .crumb b { color: var(--csl-green-deep); }
.choix-card .badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--csl-green-deep); background: #EAF3EC; padding: 5px 11px; border-radius: 999px; margin-bottom: 16px; }
.choix-card h1 { font-family: var(--csl-font-heading); font-weight: 400; font-size: 26px; color: var(--csl-ink); margin: 0 0 22px; border-bottom: 1px solid var(--csl-line); padding-bottom: 18px; }
.choix-card label { display: block; font-size: 13px; font-weight: 700; color: var(--csl-orange-dark); text-transform: uppercase; letter-spacing: .03em; margin: 30px 0 12px; }
.choix-card label:first-of-type { margin-top: 0; }
.choix-card select, .cc-input { width: 100%; appearance: none; -webkit-appearance: none; border: 1.5px solid var(--csl-line); border-radius: 10px; padding: 15px 44px 15px 16px; font-size: 15px; color: var(--csl-ink); background: var(--csl-paper); font-family: inherit; cursor: pointer; }
.choix-card select:focus, .cc-input:focus { outline: none; border-color: var(--csl-orange); }
.select-wrap { position: relative; margin-bottom: 4px; }
.select-wrap .chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--csl-muted); }
#cc-region-block, #cc-block { margin-top: 10px; }
.cc-combo { position: relative; }
.cc-combo-input { cursor: text; }
.cc-combo-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--csl-line); border-radius: 10px; max-height: 264px; overflow-y: auto; z-index: 60; box-shadow: 0 14px 30px rgba(20,33,20,0.14); }
.cc-combo-item { padding: 11px 16px; font-size: 14px; color: var(--csl-ink); cursor: pointer; }
.cc-combo-item:hover, .cc-combo-item.hi, .cc-combo-item.sel { background: #EAF3EC; color: var(--csl-green-deep); }
.cc-combo-empty { padding: 11px 16px; font-size: 13px; color: var(--csl-muted); }
.cc-list { background: var(--csl-paper); border: 1px solid var(--csl-line); border-radius: 10px; padding: 8px; }
.cc-emb-item { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 12px 14px; border-radius: 8px; cursor: pointer; color: var(--csl-ink); transition: background .15s ease; }
.choix-card .cc-emb-item { margin: 0; text-transform: capitalize; letter-spacing: normal; font-weight: 400; color: var(--csl-ink); }
.choix-card .cc-emb-item b { color: var(--csl-ink); text-transform: capitalize; font-weight: 600; }
.cc-emb-item:hover { background: #fff; }
.cc-emb-item input[type=radio] { accent-color: var(--csl-orange); width: 16px; height: 16px; flex-shrink: 0; }
.cc-emb-item:last-child { margin-bottom: 0; }
.cc-note { font-size: 12px; color: var(--csl-muted); line-height: 1.6; margin: 10px 4px 4px; padding-top: 10px; border-top: 1px solid var(--csl-line); }
.cc-chosen { background: #EAF3EC; border: 1px solid #d7e9db; border-radius: 10px; padding: 14px 16px; margin-bottom: 6px; font-size: 14px; color: var(--csl-green-deep); }
.cc-chosen p { margin: 0; }
.cta-row { margin-top: 24px; display: flex; justify-content: flex-end; }
.cta-row.cta-row-split { justify-content: space-between; align-items: center; }
.cc-back-link { color: var(--csl-ink-soft); font-size: 14px; text-decoration: none; font-weight: 600; }
.cc-back-link:hover { color: var(--csl-orange-dark); }
.cc-side { background: var(--csl-green-deep); border-radius: 14px; padding: 34px 32px; color: #eaf3ec; display: flex; flex-direction: column; }
.cc-side h2 { font-family: var(--csl-font-heading); font-weight: 400; font-size: 19px; color: #fff; margin: 0 0 22px; }
.cc-side .mini-steps { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.cc-side .mini-step { display: flex; gap: 14px; align-items: flex-start; }
.cc-side .mini-step .n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cc-side .mini-step p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #dfeee4; }
@media(max-width:820px){ .choix-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   Contact
   ========================================================= */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contact-cards .card { padding: 30px; }
.contact-cards h2 { font-size: 18px; color: var(--csl-ink) !important; margin-bottom: 14px; }
.contact-cards p { font-size: 14px; color: #6b6154; line-height: 1.7; margin-bottom: 10px; }
.contact-cards a.link { color: var(--csl-orange-dark); font-weight: 700; text-decoration: none; }
.phones { font-size: 15px; font-weight: 700; color: var(--csl-ink); margin: 14px 0 4px; }
@media(max-width:700px){ .contact-cards{ grid-template-columns: 1fr; } }

/* =========================================================
   Mes demandes (mes_services_consulaires)
   ========================================================= */
.svc-card { padding: 32px; max-width: 1000px; margin: 0 auto; }
.svc-card h1 { font-size: 24px; color: var(--csl-ink); margin-bottom: 22px; }
.alert { background: #fbeceb; border: 1px solid #f0c6c2; color: #a3392f; border-radius: 6px; padding: 16px 20px; font-size: 14px; margin-top: 22px; }
.alert b { font-weight: 700; }
.svc-card table { margin-top: 26px; width: 100%; border-collapse: collapse; }
.svc-card th { background: var(--csl-paper); text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--csl-line); color: var(--csl-ink-soft); font-family: var(--csl-font-heading); font-weight: 500; font-size: 13px; }
.svc-card td { padding: 12px 14px; border-bottom: 1px solid #eee; font-size: 14px; }

/* =========================================================
   WooCommerce — Mon compte / connexion / inscription
   ========================================================= */
.woocommerce-account .u-columns#customer_login .col-1,
.woocommerce-account .u-columns#customer_login .col-2 {
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(28,38,32,.05) !important;
	border-radius: 8px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	background: var(--csl-green-deep) !important;
	font-family: var(--csl-font-body) !important;
	border-radius: var(--csl-radius-sm) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--csl-green) !important; }
.woocommerce-info, .woocommerce-message { background: #fdf3e0 !important; border-top-color: var(--csl-orange) !important; color: #6b5a3a !important; }
.woocommerce-info::before, .woocommerce-message::before { color: var(--csl-orange) !important; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row input:focus { border-color: var(--csl-orange) !important; }
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--csl-orange) !important;
	color: #fff !important;
	font-family: var(--csl-font-body) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border: none !important;
	border-radius: var(--csl-radius-sm) !important;
	box-shadow: 0 6px 16px rgba(232,114,12,.25) !important;
}
.woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover {
	background: var(--csl-orange-dark) !important;
}
.woocommerce form.register button.button,
.woocommerce .col-2 button.button { background: var(--csl-green-deep) !important; }
.woocommerce form.register button.button:hover { background: var(--csl-green) !important; }