/* ==========================================================================
   Ileana Fundi — Interprète assermentée roumain / français
   Design system. Identité reprise de la page d'attente : bleu #093991, Averta.
   ========================================================================== */

/* --- Fontes ------------------------------------------------------------- */
@font-face {
	font-family: 'Averta';
	src: url('../fonts/averta-regular-webfont.woff2') format('woff2'),
	     url('../fonts/averta-regular-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Averta';
	src: url('../fonts/averta-bold-webfont.woff2') format('woff2'),
	     url('../fonts/averta-bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Averta';
	src: url('../fonts/averta-black-webfont.woff2') format('woff2'),
	     url('../fonts/averta-black-webfont.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* --- Jetons -------------------------------------------------------------- */
:root {
	--blue:        #093991;
	--blue-deep:   #06225a;
	--blue-ink:    #041634;
	--blue-soft:   #e8edf9;
	--blue-line:   #c3d0ee;
	--accent:      #ffc83d;
	--accent-deep: #d99a00;
	--ink:         #10182b;
	--muted:       #55607c;
	--paper:       #f6f8fd;
	--white:       #ffffff;

	--font: 'Averta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2.25rem;
	--sp-5: 3.5rem;
	--sp-6: 5rem;
	--sp-7: 7rem;

	--radius: 14px;
	--radius-lg: 22px;
	--shadow: 0 1px 2px rgba(4, 22, 52, .06), 0 8px 28px -12px rgba(4, 22, 52, .18);
	--shadow-lg: 0 2px 4px rgba(4, 22, 52, .05), 0 24px 56px -20px rgba(4, 22, 52, .28);

	--wrap: 1280px;
	--prose: 48rem;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration-color: var(--blue-line); text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); text-decoration-color: currentColor; }

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Typographie --------------------------------------------------------- */
h1, h2, h3, h4 {
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 var(--sp-2);
	text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem); text-transform: lowercase; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem); text-transform: lowercase; margin-top: var(--sp-5); }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.005em; margin-top: var(--sp-3); }
h1 .light, h2 .light { font-weight: 400; }
/* Phrase en casse normale dans un h1 par ailleurs en minuscules. */
.h1-sub {
	display: block; margin-top: .18em;
	text-transform: none; font-weight: 400;
	font-size: .62em; line-height: 1.2; opacity: .92;
}

p, ul, ol { margin: 0 0 var(--sp-2); }
p { text-wrap: pretty; }
strong { font-weight: 700; }

.lead {
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
	line-height: 1.55;
	color: var(--muted);
}

/* --- Structure ----------------------------------------------------------- */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.prose { max-width: var(--prose); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }

.section { padding-block: clamp(3rem, 7vw, var(--sp-6)); }
.section--paper { background: var(--paper); }
.section--blue { background: var(--blue); color: var(--white); }
.section--blue h2, .section--blue h3 { color: var(--white); }
.section--blue .lead { color: rgba(255, 255, 255, .82); }
.section--blue a { color: var(--white); text-decoration-color: rgba(255, 255, 255, .5); }

.skip {
	position: absolute; left: -9999px;
	background: var(--accent); color: var(--blue-ink);
	padding: .75rem 1.25rem; font-weight: 700; z-index: 100;
	border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }

/* --- En-tête ------------------------------------------------------------- */
.hdr {
	position: sticky; top: 0; z-index: 50;
	background: rgba(9, 57, 145, .96);
	backdrop-filter: saturate(150%) blur(10px);
	color: var(--white);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.hdr__in {
	display: flex; align-items: center; gap: var(--sp-3);
	min-height: 4.25rem;
}
.brand {
	font-weight: 900; font-size: 1.1rem; line-height: 1.15;
	color: var(--white); text-decoration: none;
	text-transform: lowercase; letter-spacing: -0.01em;
	min-width: 0;
}
.brand span { display: block; font-weight: 400; font-size: .72rem; text-transform: none; opacity: .72; letter-spacing: 0; }
/* Sous-titre masqué sur les très petits écrans : il pousse le bouton menu hors cadre. */
@media (max-width: 400px) { .brand span { display: none; } }
.brand:hover { color: var(--accent); }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav a {
	display: block; padding: .5rem .7rem;
	color: rgba(255, 255, 255, .88); text-decoration: none;
	font-size: .9375rem; border-radius: 8px;
}
.nav a:hover { background: rgba(255, 255, 255, .13); color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); font-weight: 700; background: rgba(255, 255, 255, .13); }

.nav__tel {
	display: inline-flex; align-items: center; gap: .45rem;
	background: var(--accent); color: var(--blue-ink) !important;
	font-weight: 900; padding: .55rem 1rem !important; border-radius: 999px;
	white-space: nowrap;
}
.nav__tel:hover { background: var(--white); }

.burger {
	margin-left: auto; display: none;
	background: rgba(255, 255, 255, .14); border: 0; color: var(--white);
	font: inherit; font-weight: 700; font-size: .9rem;
	padding: .55rem .9rem; border-radius: 999px; cursor: pointer;
}
@media (max-width: 900px) {
	.burger { display: block; }
	.nav {
		position: absolute; inset: 100% 0 auto; margin: 0;
		background: var(--blue-deep); padding: var(--sp-2) clamp(1.25rem, 4vw, 2.5rem) var(--sp-3);
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}
	.nav[hidden] { display: none; }
	.nav ul { flex-direction: column; align-items: stretch; gap: .1rem; }
	.nav a { padding: .8rem .75rem; font-size: 1rem; }
	.nav__tel { justify-content: center; margin-top: var(--sp-2); }
}

/* --- Boutons ------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font: inherit; font-weight: 900; font-size: 1rem;
	padding: .85rem 1.5rem; border-radius: 999px;
	text-decoration: none; border: 2px solid transparent; cursor: pointer;
	transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }

.btn--accent { background: var(--accent); color: var(--blue-ink); }
.btn--accent:hover { background: #ffd469; color: var(--blue-ink); }

.btn--solid { background: var(--blue); color: var(--white); }
.btn--solid:hover { background: var(--blue-deep); color: var(--white); }

.btn--ghost { border-color: currentColor; color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--blue); border-color: var(--white); }

.btn--outline { border-color: var(--blue-line); color: var(--blue); background: var(--white); }
.btn--outline:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* --- Héros --------------------------------------------------------------- */
.hero {
	background: linear-gradient(165deg, var(--blue) 0%, #0a2f76 55%, var(--blue-deep) 100%);
	color: var(--white);
	padding-block: clamp(3rem, 8vw, var(--sp-7)) clamp(3rem, 7vw, var(--sp-6));
	position: relative; overflow: hidden;
}
.hero::after {
	content: ""; position: absolute; right: -12%; top: -25%;
	width: 46rem; height: 46rem; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 200, 61, .16) 0%, transparent 68%);
	pointer-events: none;
}
.hero__in { position: relative; z-index: 1; max-width: 50rem; }
.hero h1 { color: var(--white); margin-bottom: var(--sp-3); }
.hero h1 b { font-weight: 900; }
.hero__lead {
	font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
	line-height: 1.5; color: rgba(255, 255, 255, .88);
	margin-bottom: var(--sp-4); max-width: 40rem;
}
.hero .btn-row { margin-bottom: var(--sp-4); }

.eyebrow {
	display: inline-flex; align-items: center; gap: .55rem;
	font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22);
	padding: .4rem 1rem; border-radius: 999px; margin-bottom: var(--sp-3);
	color: var(--white);
}
.eyebrow::before {
	content: ""; width: .5rem; height: .5rem; border-radius: 50%;
	background: var(--accent); flex: none;
}
.section--paper .eyebrow, .section .eyebrow:not(.hero .eyebrow) {
	background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue);
}

.hero__facts {
	display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
	list-style: none; margin: 0; padding: var(--sp-3) 0 0;
	border-top: 1px solid rgba(255, 255, 255, .22);
	font-size: .9375rem; color: rgba(255, 255, 255, .85);
}
.hero__facts li { display: flex; align-items: center; gap: .5rem; }
.hero__facts li::before {
	content: ""; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%;
	background: var(--accent);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .85rem no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .85rem no-repeat;
}

/* En-tête de page intérieure */
.phead {
	background: linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%);
	color: var(--white);
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem);
}
.phead h1 { color: var(--white); }
.phead .lead { color: rgba(255, 255, 255, .85); max-width: 42rem; margin-bottom: 0; }

.crumbs { font-size: .875rem; margin-bottom: var(--sp-2); color: rgba(255, 255, 255, .72); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.crumbs li:not(:last-child)::after { content: "›"; margin-left: .4rem; opacity: .6; }
.crumbs a { color: rgba(255, 255, 255, .85); }

/* --- Grilles et cartes --------------------------------------------------- */
/* min() évite qu'une colonne plus large que l'espace disponible
   provoque un débordement horizontal sur petit écran. */
.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
/* Deux colonnes strictes : pour les séries de cartes, où auto-fit
   produirait un 3+1 bancal dès que le conteneur s'élargit. */
.grid--pair { grid-template-columns: 1fr; }
@media (min-width: 52rem) { .grid--pair { grid-template-columns: repeat(2, 1fr); } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

.card {
	background: var(--white); border: 1px solid var(--blue-line);
	border-radius: var(--radius-lg); padding: var(--sp-3);
	display: flex; flex-direction: column; gap: .35rem;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card h3 { margin: 0; font-weight: 900; font-size: 1.15rem; color: var(--blue); }
.card p { color: var(--muted); font-size: .9688rem; margin: 0; }
.card__more {
	margin-top: auto; padding-top: var(--sp-2);
	font-weight: 700; font-size: .9375rem; text-decoration: none;
	display: inline-flex; align-items: center; gap: .35rem;
}
.card__more::after { content: "→"; transition: transform .18s ease; }
a.card { text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover {
	transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue);
}
a.card:hover .card__more::after { transform: translateX(4px); }

.card__num {
	font-size: .8125rem; font-weight: 900; letter-spacing: .08em;
	color: var(--accent-deep); text-transform: uppercase;
}

/* Liste à puces cochées */
.checks { list-style: none; padding: 0; margin: 0 0 var(--sp-2); display: grid; gap: .6rem; }
.checks li { position: relative; padding-left: 1.85rem; }
.checks li::before {
	content: ""; position: absolute; left: 0; top: .42em;
	width: 1.15rem; height: 1.15rem; border-radius: 50%;
	background: var(--blue-soft);
	box-shadow: inset 0 0 0 1px var(--blue-line);
}
.checks li::after {
	content: ""; position: absolute; left: .28rem; top: .62em;
	width: .6rem; height: .35rem;
	border-left: 2.2px solid var(--blue); border-bottom: 2.2px solid var(--blue);
	transform: rotate(-45deg);
}
.section--blue .checks li::before { background: rgba(255, 255, 255, .16); box-shadow: none; }
.section--blue .checks li::after { border-color: var(--accent); }

/* --- Bloc de contact ----------------------------------------------------- */
.contact-band {
	background: linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 100%);
	color: var(--white); border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 4vw, var(--sp-4));
}
.contact-band h2 { margin-top: 0; color: var(--white); }
.contact-band p { color: rgba(255, 255, 255, .85); }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.contact-list a {
	display: inline-flex; align-items: baseline; gap: .6rem;
	font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); font-weight: 900;
	text-decoration: none; color: inherit;
}
.contact-list a:hover { color: var(--accent); }
.contact-list .lbl {
	font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	opacity: .65; flex: none; min-width: 3.6rem;
}
.contact-list .mail { font-size: clamp(1rem, .9rem + .45vw, 1.2rem); word-break: break-word; }

/* --- Ligne de contact sobre (fin de page) -------------------------------
   Remplace le bloc bleu à boutons : une seule ligne, pas de carte,
   pas de bouton. Le numéro reste cliquable. */
.contact-line {
	border-top: 1px solid var(--blue-line);
	padding-top: var(--sp-3);
	margin-top: 0;
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: .4rem 1.5rem;
	font-size: 1.0625rem;
}
.contact-line p { margin: 0; color: var(--muted); }
.contact-line .contact-line__q { font-weight: 700; color: var(--ink); }
.contact-line a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.contact-line a:hover { text-decoration: underline; }
.contact-line .sep { color: var(--muted); opacity: .55; padding-inline: .15rem; }
@media (max-width: 560px) {
	.contact-line { gap: .35rem; flex-direction: column; }
	.contact-line .sep { display: none; }
}

/* --- Tableau ------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; margin-bottom: var(--sp-3); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9688rem; min-width: 30rem; }
caption { text-align: left; font-weight: 700; color: var(--muted); padding-bottom: .6rem; font-size: .9rem; }
th, td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--blue-line); vertical-align: top; }
thead th { background: var(--blue-soft); color: var(--blue-deep); font-weight: 900; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: .6rem; }
.faq details {
	background: var(--white); border: 1px solid var(--blue-line);
	border-radius: var(--radius); padding: 0 var(--sp-3);
}
.faq details[open] { box-shadow: var(--shadow); }
.faq summary {
	font-weight: 900; cursor: pointer; padding: var(--sp-2) 0;
	list-style: none; display: flex; gap: var(--sp-2); align-items: flex-start;
	color: var(--blue-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+"; margin-left: auto; flex: none;
	font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--blue);
	transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue); }
.faq .faq__a { padding-bottom: var(--sp-2); color: var(--muted); }
.faq .faq__a > :last-child { margin-bottom: 0; }

/* --- Citation ------------------------------------------------------------ */
.quote {
	border-left: 4px solid var(--accent);
	padding: .25rem 0 .25rem var(--sp-3);
	margin: var(--sp-3) 0;
	font-size: 1.15rem; line-height: 1.55;
}
.quote p { margin-bottom: .5rem; }
.quote cite { font-size: .9rem; font-style: normal; font-weight: 700; color: var(--muted); }

/* --- Encart -------------------------------------------------------------- */
.note {
	background: var(--blue-soft); border: 1px solid var(--blue-line);
	border-left: 4px solid var(--blue);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: var(--sp-2) var(--sp-3);
	margin: var(--sp-3) 0; font-size: .9688rem;
}
.note > :last-child { margin-bottom: 0; }
.note strong { color: var(--blue-deep); }

/* --- Pastilles de lieux -------------------------------------------------- */
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--sp-3); padding: 0; }
.pills li {
	background: var(--white); border: 1px solid var(--blue-line);
	border-radius: 999px; padding: .4rem 1rem; font-size: .9375rem; font-weight: 700; color: var(--blue-deep);
}
.section--blue .pills li { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: var(--white); }

/* --- Pied de page -------------------------------------------------------- */
.ftr { background: var(--blue-ink); color: rgba(255, 255, 255, .72); padding-block: var(--sp-5) var(--sp-3); font-size: .9375rem; }
.ftr h2, .ftr h3 { color: var(--white); font-size: 1rem; font-weight: 900; text-transform: none; margin: 0 0 var(--sp-2); letter-spacing: 0; }
.ftr a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.ftr a:hover { color: var(--accent); text-decoration: underline; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ftr__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.ftr__brand { font-weight: 900; font-size: 1.2rem; color: var(--white); text-transform: lowercase; margin-bottom: .35rem; }
.ftr__legal {
	margin-top: var(--sp-4); padding-top: var(--sp-2);
	border-top: 1px solid rgba(255, 255, 255, .15);
	display: flex; flex-wrap: wrap; gap: .5rem var(--sp-3); justify-content: space-between;
	font-size: .875rem; color: rgba(255, 255, 255, .55);
}

/* --- Utilitaires --------------------------------------------------------- */
.center { text-align: center; }
.center .lead, .center .prose { margin-inline: auto; }
.center .btn-row { justify-content: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.picto {
	width: 3.25rem; height: 3.25rem; flex: none;
	background: url('../picto.svg') no-repeat center / contain;
}

@media print {
	.hdr, .nav, .skip, .hero::after { display: none !important; }
	body { color: #000; background: #fff; font-size: 11pt; }
	.hero, .phead, .section--blue, .contact-band, .ftr { background: #fff !important; color: #000 !important; }
	.hero h1, .phead h1, .section--blue h2, .contact-band h2, .ftr h3 { color: #000 !important; }
	a { text-decoration: underline; }
}