/* tdac-thailand.net — shared stylesheet
Palette reprise de template-thailand (drapeau thailandais) : rouge/bleu marine, police
Sora partout (un seul font-family, contrairement a l'ancienne paire Inter/Manrope). */
:root {
--red: #A51931;
--red-dark: #7A1224;
--red-tint: #FBEAEC;
--ink: #1A1A1A;
--navy: #241D4F;
--navy-light: #3A2F7A;
--gold: #B9873C;
--gold-tint: #F7EFDF;
--muted: #5B6472;
--line: #E3E5EA;
--bg-tint: #F7F8FA;
--white: #FFFFFF;
--success: #2E7D5B;
}
/* Police Sora chargee via dans layout/seo-head.php, pas via @import
ici : @import bloque le rendu et retarde la decouverte de la police (le navigateur doit
d'abord telecharger et parser tout ce fichier CSS avant de meme decouvrir qu'il faut aller
chercher la police), alors qu'un dans le est decouvert et recupere en
parallele du reste - meilleur score PageSpeed. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--ink);
background: var(--white);
line-height: 1.55;
font-size: 16px;
}
h1, h2, h3, .logo, .price-amount, .step-num, .nav-cta, .btn-cta, .btn-primary, .btn-choose, .btn-outline {
font-family: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--red); }
img { max-width: 100%; display: block; }
.container {
max-width: 760px;
margin: 0 auto;
padding: 0 24px;
}
.payment-success-banner {
width: calc(100% - 48px); max-width: 712px; margin: 24px auto 0; padding: 14px 24px;
background: #E4F3E7; border: 1px solid #B7DFC0; border-radius: 6px;
color: #1E6B34; font-weight: 600; font-size: 12.5px;
}
/* ---------- Bandeau disclaimer (home uniquement) ---------- */
.disclaimer-top {
background: #FDF3E7;
border-bottom: 1px solid #F0DFAE;
font-size: 12.5px;
color: #7A5A00;
text-align: center;
padding: 7px 14px;
}
/* ---------- Bandeau drapeau (2px, discret) ---------- */
.flag-bar {
height: 4px;
background: var(--red);
}
/* ---------- En-tête / navigation ---------- */
header.site-header {
border-bottom: 1px solid var(--line);
background: var(--white);
}
.nav-inner {
max-width: 1040px;
margin: 0 auto;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.nav-right {
display: flex;
align-items: center;
gap: 20px;
}
.logo {
font-size: 19px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
text-decoration: none;
display: flex;
align-items: center;
}
.logo .word-brand { margin-left: 7px; color: var(--ink); }
.logo .logo-plane {
width: 17px;
height: 17px;
color: var(--red);
flex-shrink: 0;
}
.footer-col h3.brand-mark { display: flex; align-items: center; font-size: 15px; }
.footer-col h3.brand-mark .word-brand { margin-left: 6px; color: var(--ink); }
.footer-col h3.brand-mark .logo-plane {
width: 14px; height: 14px; color: var(--red);
flex-shrink: 0;
}
nav.main-nav {
display: flex;
align-items: center;
gap: 28px;
}
nav.main-nav a {
color: var(--ink);
text-decoration: none;
font-size: 14.5px;
font-weight: 600;
white-space: nowrap;
}
nav.main-nav a:hover { color: var(--red); }
.nav-cta {
background: var(--red);
color: var(--white) !important;
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
}
.nav-cta:hover { background: var(--red-dark); }
/* ---------- Burger menu (mobile only — see @media (max-width: 640px) below) ---------- */
.nav-toggle-btn {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 38px;
height: 38px;
border-radius: 6px;
cursor: pointer;
flex-shrink: 0;
}
.nav-toggle-btn:hover { background: var(--bg-tint); }
.nav-toggle-btn span {
display: block;
width: 20px;
height: 2px;
background: var(--ink);
border-radius: 2px;
}
/* ---------- Language switcher (native details/summary, no JS needed) ---------- */
.lang-switcher {
position: relative;
}
.lang-switcher summary.lang-current {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px 12px;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
list-style: none;
}
.lang-switcher summary.lang-current::-webkit-details-marker { display: none; }
.lang-switcher summary.lang-current:hover { border-color: var(--red); color: var(--red); }
.lang-switcher summary.lang-current svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.15s; }
.lang-switcher[open] summary.lang-current svg { transform: rotate(180deg); }
.lang-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--white);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 12px 30px -10px rgba(0,0,0,0.18);
padding: 6px;
min-width: 190px;
max-height: 340px;
overflow-y: auto;
z-index: 50;
}
.lang-menu a {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
}
.lang-menu a:hover { background: var(--bg-tint); color: var(--red); }
.lang-menu a.active { color: var(--red); font-weight: 700; background: var(--red-tint); }
.lang-switcher .flag, .lang-menu .flag { font-size: 15px; }
@media (max-width: 760px) {
.lang-menu { right: auto; left: 0; }
}
/* ---------- Hero ---------- */
.hero {
background: var(--bg-tint);
padding: 56px 24px 48px;
text-align: center;
border-bottom: 1px solid var(--line);
}
.hero h1 {
font-size: 32px;
line-height: 1.28;
max-width: 760px;
margin: 0 auto 16px;
color: var(--ink);
}
.hero p.lead {
font-size: 17px;
color: var(--muted);
max-width: 620px;
margin: 0 auto;
}
.breadcrumb {
font-size: 13px;
color: var(--muted);
max-width: 760px;
margin: 0 auto 18px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--red); }
/* ---------- Formulaire ---------- */
.form-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.form-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px 24px;
background: var(--red-tint);
border-bottom: 1px solid var(--line);
font-size: 13px;
color: var(--red-dark);
font-weight: 700;
flex-wrap: wrap;
}
.form-progress .step {
width: 26px; height: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--red);
color: var(--white);
font-size: 12px;
}
.form-progress .step.pending {
background: var(--white);
color: var(--muted);
border: 1px solid var(--line);
}
.form-progress .sep { color: #D8B7BB; }
.form-progress .muted-label { color: var(--muted); font-weight: 400; }
.section-title {
padding: 24px 28px 4px;
font-size: 18px;
font-weight: 700;
color: var(--ink);
}
.fields {
padding: 8px 28px 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 20px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-note {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
margin: 0 0 4px;
}
.field-hint { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: -2px; line-height: 1.4; }
.radio-row {
display: flex;
gap: 28px;
margin-top: 4px;
}
.radio-row label {
display: flex;
align-items: center;
gap: 7px;
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.terms-check {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-weight: 400;
}
.terms-check input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 2px 0 0;
flex-shrink: 0;
accent-color: var(--red);
border: 1.5px solid var(--muted);
border-radius: 4px;
cursor: pointer;
}
.radio-row input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--red);
cursor: pointer;
}
.field.full { grid-column: 1 / -1; }
label { font-size: 13px; font-weight: 600; color: var(--ink); }
input, select, textarea {
font-size: 15px;
padding: 11px 12px;
border: 1px solid var(--line);
border-radius: 7px;
color: var(--ink);
background: var(--white);
font-family: inherit;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.12);
}
input::placeholder { color: #A9A9A9; }
.divider { height: 1px; background: var(--line); margin: 4px 28px; }
.pay-bar {
padding: 24px 28px 28px;
background: var(--bg-tint);
border-top: 1px solid var(--line);
text-align: center;
}
.pay-note { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.btn-primary {
display: inline-block;
width: 100%;
max-width: 360px;
background: var(--red);
color: var(--white) !important;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 16px 24px;
border: none;
border-radius: 7px;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--red-dark); }
.btn-primary:disabled {
background: #c9c9c9;
color: #6b6b6b !important;
cursor: not-allowed;
}
.btn-primary:disabled:hover { background: #c9c9c9; }
.after-note {
max-width: 760px; margin: 20px auto 0; padding: 0 24px;
font-size: 13px; color: var(--muted); text-align: center;
}
.after-note b { color: var(--ink); }
/* ---------- Contenu éditorial ---------- */
.content { max-width: 720px; margin: 0 auto; padding: 8px 24px 24px; }
.content h2 { font-size: 22px; color: var(--ink); margin: 48px 0 14px; }
.content h2 .num { color: var(--red); margin-right: 4px; }
.page-body h2 .num {
color: var(--red); font-weight: 800; font-size: 15px; background: var(--red-tint);
width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
justify-content: center; flex-shrink: 0; margin-right: 8px;
}
.content p { font-size: 15.5px; color: var(--ink); margin: 0 0 12px; }
.content ul, .content ol { margin: 0 0 12px; padding-left: 20px; }
.content ul li, .content ol li { font-size: 15.5px; margin-bottom: 8px; }
hr.section-rule { border: none; border-top: 1px solid var(--line); margin: 40px 0 0; }
.cta-wrap { text-align: center; margin: 28px 0 8px; }
.btn-cta {
display: inline-block;
background: var(--red);
color: var(--white) !important;
font-size: 15px;
font-weight: 700;
text-decoration: none;
padding: 14px 32px;
border-radius: 7px;
transition: background 0.15s ease;
}
.btn-cta:hover { background: var(--red-dark); }
.btn-cta.secondary { background: var(--navy); }
.btn-cta.secondary:hover { background: var(--navy-light); }
.btn-cta.outline {
background: var(--white);
color: var(--red) !important;
border: 1.5px solid var(--red);
}
.btn-cta.outline:hover { background: var(--red-tint); }
/* ---------- FAQ accordéon ---------- */
.faq-item {
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 16px 20px;
font-size: 15.5px;
font-weight: 700;
color: var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--white);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-size: 20px;
font-weight: 400;
color: var(--red);
flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); background: var(--red-tint); }
.faq-answer { padding: 16px 20px; font-size: 15px; color: var(--muted); background: var(--white); }
/* ---------- Prix (discret) + bandeau de clôture ---------- */
.price-line { font-size: 15px; color: var(--muted); margin: 4px 0 18px; }
.price-line b { color: var(--ink); font-weight: 700; }
.closing-banner {
text-align: center;
background: var(--navy);
color: var(--white);
border-radius: 10px;
padding: 32px 28px;
margin: 32px 0 60px;
font-size: 19px;
font-weight: 700;
line-height: 1.4;
}
/* ---------- Fil d'Ariane ---------- */
.breadcrumb-nav { max-width: 720px; margin: 16px auto 0; padding: 0 24px; font-size: 13.5px; color: var(--muted); }
.breadcrumb-nav a { color: var(--muted); text-decoration: underline; }
.breadcrumb-nav a:hover { color: var(--red); }
.breadcrumb-nav span[aria-current] { color: var(--ink); }
/* ---------- Pages simples (contact / mentions légales) ---------- */
.page-body { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
.page-body h1 { font-size: 28px; margin-bottom: 8px; color: var(--ink); }
.page-body .lead { color: var(--muted); margin-bottom: 32px; }
.page-body h2 { font-size: 19px; margin: 32px 0 10px; color: var(--ink); }
.page-body p { font-size: 15.5px; margin-bottom: 12px; }
.page-body ul { padding-left: 20px; }
.page-body li { font-size: 15.5px; margin-bottom: 8px; }
.info-callout {
background: var(--gold-tint);
border: 1px solid #E6D3AC;
border-radius: 10px;
padding: 16px 18px;
font-size: 14.5px;
margin: 18px 0 24px;
}
.info-callout b { color: var(--navy); }
.compare-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 28px;
font-size: 14px;
}
.compare-table th, .compare-table td {
border: 1px solid var(--line);
padding: 11px 12px;
text-align: left;
vertical-align: top;
}
.compare-table th {
background: var(--bg-tint);
font-weight: 700;
color: var(--ink);
}
.compare-table td:first-child, .compare-table th:first-child { font-weight: 700; white-space: nowrap; }
.topic-card {
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px 26px;
margin: 20px 0 28px;
}
.topic-card .topic-kicker {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--red);
background: var(--red-tint);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
.topic-card h2 { margin-top: 0 !important; }
.topic-facts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 24px;
margin: 14px 0 16px;
padding: 14px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.topic-facts div { font-size: 14px; }
.topic-facts b { display: block; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
@media (max-width: 600px) {
.topic-facts { grid-template-columns: 1fr; }
.compare-table { font-size: 12.5px; }
}
.contact-box {
border: 1px solid var(--line);
border-radius: 10px;
padding: 24px 26px;
background: var(--bg-tint);
margin: 24px 0;
}
.contact-box a { font-weight: 700; }
/* ---------- Pied de page ---------- */
footer.site-footer {
border-top: 1px solid var(--line);
background: var(--bg-tint);
padding: 40px 24px 28px;
margin-top: 40px;
}
.footer-inner {
max-width: 1040px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 32px;
}
.footer-col h3 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
margin: 0 0 12px;
}
.footer-col a {
display: block;
color: var(--ink);
text-decoration: none;
font-size: 14.5px;
margin-bottom: 8px;
}
.footer-col a:hover { color: var(--red); }
.footer-col p { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.footer-disclaimer {
max-width: 1040px;
margin: 28px auto 0;
padding-top: 20px;
border-top: 1px solid var(--line);
font-size: 12.5px;
color: var(--muted);
line-height: 1.6;
}
.footer-bottom {
max-width: 1040px;
margin: 16px auto 0;
font-size: 12.5px;
color: var(--muted);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 640px) {
.fields { grid-template-columns: 1fr; }
.hero h1 { font-size: 25px; }
.footer-inner { grid-template-columns: 1fr; }
/* Nav complete devient un panneau deroulant sous le header, ouvert via la case a cocher
#nav-toggle (meme technique "sans JS" que le lang-switcher en details/summary). */
.nav-toggle-btn { display: flex; }
.nav-inner { position: relative; }
/* Ordre visuel mobile : logo, puis selecteur de langue, puis burger (dans le DOM le burger
precede .nav-right pour que le selecteur ~ CSS du panneau fonctionne, d'ou ce reordering). */
.logo { order: 1; }
.nav-right { order: 2; }
.nav-toggle-btn { order: 3; }
nav.main-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--white);
border-bottom: 1px solid var(--line);
box-shadow: 0 12px 30px -10px rgba(0,0,0,0.18);
max-height: 0;
overflow: hidden;
visibility: hidden;
z-index: 40;
}
.nav-toggle-input:checked ~ .nav-right nav.main-nav {
max-height: 60vh;
overflow-y: auto;
visibility: visible;
}
nav.main-nav a {
padding: 14px 24px;
border-top: 1px solid var(--line);
white-space: normal;
}
nav.main-nav a:first-child { border-top: none; }
.nav-cta { margin: 10px 24px 14px; text-align: center; }
}
/* ================================================================
Nouveau template — composants inspirés du site Madagascar
================================================================ */
/* ---- Eyebrow / badge pilule ---- */
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--red-dark);
background: var(--red-tint);
padding: 7px 16px;
border-radius: 999px;
margin-bottom: 18px;
}
/* ---- Hero v2 : deux colonnes ---- */
.hero-v2 {
background: linear-gradient(180deg, var(--bg-tint) 0%, var(--white) 100%);
padding: 56px 24px 64px;
border-bottom: 1px solid var(--line);
}
.hero-grid {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
}
.hero-grid h1 { font-size: 30px; line-height: 1.28; margin: 0 0 16px; text-align: left; }
.hero-grid .lead { font-size: 16.5px; color: var(--muted); text-align: left; max-width: 520px; margin: 0 0 26px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.btn-outline {
display: inline-block;
background: var(--white);
color: var(--ink) !important;
border: 1.5px solid var(--line);
padding: 14px 26px;
border-radius: 7px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
.btn-outline:hover { border-color: var(--red); color: var(--red) !important; }
.trust-line { font-size: 13px; color: var(--muted); }
.trust-line b { color: var(--ink); }
/* ---- Hero visual: boarding-pass card (signature element) ---- */
.visual-card {
background: var(--navy);
border-radius: 16px;
padding: 26px 26px 0;
color: var(--white);
box-shadow: 0 20px 45px -20px rgba(14,46,46,0.45);
position: relative;
overflow: hidden;
}
.visual-card::after {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(206,17,38,0.28);
}
.visual-card .vc-kicker {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
position: relative;
}
.visual-card .vc-title {
font-size: 21px;
font-weight: 800;
margin-bottom: 18px;
position: relative;
}
.vc-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; position: relative; }
.vc-pill {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
padding: 6px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
}
.vc-stub {
position: relative;
margin: 0 -26px;
padding: 20px 26px 22px;
border-top: 1px dashed rgba(255,255,255,0.28);
}
.vc-stub::before, .vc-stub::after {
content: "";
position: absolute;
top: -9px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--white);
}
.vc-stub::before { left: -9px; }
.vc-stub::after { right: -9px; }
.vc-facts { display: flex; flex-direction: column; gap: 10px; position: relative; }
.vc-fact { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,0.9); }
.vc-fact svg { flex-shrink: 0; }
/* ---- Icônes ligne (pictos) ---- */
.icon {
width: 20px; height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-red { color: var(--red); }
/* ---- Sélecteur d'éligibilité ---- */
.checker-section { padding: 56px 24px; background: var(--white); }
.checker-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.checker-box {
background: var(--white);
border: 1px solid var(--line);
border-radius: 14px;
padding: 28px;
margin-top: 28px;
text-align: left;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.checker-box h3 { margin: 0 0 16px; font-size: 15px; }
.checker-row { display: flex; gap: 10px; flex-wrap: wrap; }
.checker-row select {
flex: 1;
min-width: 220px;
font-size: 15px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--white);
}
.checker-row button {
background: var(--red);
color: var(--white);
border: none;
padding: 0 26px;
border-radius: 7px;
font-weight: 700;
font-size: 15px;
cursor: pointer;
}
.checker-row button:hover { background: var(--red-dark); }
.checker-result {
margin-top: 16px;
padding: 18px 16px;
border-radius: 8px;
background: var(--red-tint);
border: 1px solid #F3CCD1;
font-size: 14px;
color: var(--ink);
display: none;
}
.checker-result.visible { display: block; }
.checker-result b { color: var(--red-dark); }
.checker-note-cta { margin-top: 32px; text-align: center; }
.checker-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
/* ---- Cartes à icône (3 colonnes) ---- */
.icon-cards {
max-width: 1080px;
margin: 32px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.icon-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
padding: 26px 24px;
}
.icon-card .icon-badge {
width: 42px; height: 42px;
border-radius: 10px;
background: var(--red-tint);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.icon-card h3 { font-size: 16.5px; margin: 0 0 8px; }
.icon-card p { font-size: 14.5px; color: var(--muted); margin: 0; }
/* ---- Steps numérotés (3 étapes) ---- */
.flight-path {
max-width: 1080px;
margin: 28px auto 0;
display: none;
}
.flight-path svg { display: block; width: 100%; height: 28px; }
.flight-path .path-line {
stroke: var(--muted);
stroke-width: 2;
stroke-dasharray: 1 9;
stroke-linecap: round;
fill: none;
}
.flight-path .path-plane { color: var(--red); transform: rotate(90deg); transform-origin: center; }
.steps-grid {
max-width: 1080px;
margin: 10px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.step-card {
background: var(--bg-tint);
border: 1px solid var(--line);
border-radius: 12px;
padding: 26px 24px;
position: relative;
}
.step-card .step-num {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--red);
color: var(--white);
font-weight: 800;
font-size: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.step-card .icon-badge {
width: 42px; height: 42px;
border-radius: 10px;
background: var(--white);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.step-card h3 { font-size: 16.5px; margin: 0 0 8px; }
.step-card p { font-size: 14.5px; color: var(--muted); margin: 0; }
/* ---- Section générique avec eyebrow centré ---- */
.section-v2 { padding: 60px 24px; }
.section-head { max-width: 720px; margin: 0 auto 8px; text-align: center; }
.section-head h2 { font-size: 26px; margin: 0 0 12px; }
.section-head p { font-size: 15.5px; color: var(--muted); margin: 0; }
/* ---- Tarifs : 3 cartes ---- */
.pricing-grid {
max-width: 1080px;
margin: 36px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.price-card {
background: var(--white);
border: 1.5px solid var(--line);
border-radius: 14px;
padding: 30px 26px;
position: relative;
}
.price-card--featured {
border-color: var(--red);
box-shadow: 0 12px 30px -14px rgba(206,17,38,0.35);
}
.price-card .badge-top {
position: absolute;
top: -13px; left: 26px;
background: var(--red);
color: var(--white);
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 999px;
}
.price-card .price-name { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.price-card .price-amount { font-size: 34px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.price-card .price-amount span { font-size: 14px; font-weight: 600; color: var(--muted); }
.price-card .price-desc { font-size: 14px; color: var(--muted); margin-bottom: 20px; min-height: 40px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 22px; }
.price-card ul li {
font-size: 14px;
color: var(--ink);
padding-left: 24px;
position: relative;
margin-bottom: 10px;
}
.price-card ul li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--red);
font-weight: 800;
}
.price-card .btn-choose {
display: block;
text-align: center;
background: var(--bg-tint);
color: var(--ink) !important;
border: 1px solid var(--line);
padding: 12px 20px;
border-radius: 7px;
font-weight: 700;
font-size: 14.5px;
text-decoration: none;
}
.price-card--featured .btn-choose { background: var(--red); color: var(--white) !important; border-color: var(--red); }
.price-card .btn-choose:hover { opacity: 0.9; }
.pricing-note {
max-width: 720px;
margin: 32px auto 0;
font-size: 13px;
color: var(--muted);
text-align: center;
line-height: 1.6;
}
@media (min-width: 861px) {
.flight-path { display: block; }
}
@media (max-width: 860px) {
.hero-grid { grid-template-columns: 1fr; }
.icon-cards, .steps-grid, .pricing-grid { grid-template-columns: 1fr; }
}
/* ================================================================
RTL support (Arabic and any other right-to-left language)
Scoped to [dir="rtl"] so it has zero effect on LTR languages
sharing this same stylesheet file.
================================================================ */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .nav-inner { flex-direction: row-reverse; }
[dir="rtl"] .nav-right { flex-direction: row-reverse; }
[dir="rtl"] nav.main-nav { flex-direction: row-reverse; }
[dir="rtl"] .logo { flex-direction: row-reverse; }
[dir="rtl"] .logo .logo-plane { transform: rotate(-45deg) scaleX(-1); }
[dir="rtl"] .footer-col h3.brand-mark { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .hero-actions { flex-direction: row-reverse; justify-content: center; }
[dir="rtl"] .hero-grid { direction: rtl; }
[dir="rtl"] .checker-row { flex-direction: row-reverse; }
[dir="rtl"] .vc-fact { flex-direction: row-reverse; }
[dir="rtl"] .vc-pills { flex-direction: row-reverse; }
[dir="rtl"] .content ul, [dir="rtl"] .content ol,
[dir="rtl"] .page-body ul, [dir="rtl"] .page-body ol { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .lang-switcher summary.lang-current svg { transform: scaleX(-1); }
[dir="rtl"] .footer-inner { text-align: right; }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
[dir="rtl"] .compare-table th, [dir="rtl"] .compare-table td { text-align: right; }
[dir="rtl"] .topic-facts b { text-align: right; }
[dir="rtl"] .step-num, [dir="rtl"] .icon-badge { margin-left: 0; }
[dir="rtl"] .faq-item summary::after { transform: scaleX(-1); }
@media (max-width: 760px) {
[dir="rtl"] .lang-menu { left: auto; right: 0; }
}
/* ---------- Bandeau cookie ---------- */
.cookie-banner {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 200;
max-width: 640px;
margin: 0 auto;
background: var(--ink);
color: #fff;
border-radius: 12px;
padding: 16px 20px;
box-shadow: 0 12px 30px -8px rgba(0,0,0,0.35);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
font-size: 13.5px;
}
/* [hidden] doit l'emporter sur le display:flex ci-dessus (specificite egale sinon, l'attribut
hidden natif du navigateur ne suffit pas face a un display explicite) — sans cette regle,
le bandeau reste visible meme apres un clic sur Accepter/Refuser (bug constate en prod). */
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; flex: 1 1 320px; line-height: 1.5; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-btn, .cookie-banner-accept, .cookie-banner-reject {
padding: 9px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
border: 1px solid transparent;
font-family: inherit;
white-space: nowrap;
}
.cookie-banner-accept, .cookie-btn-primary { background: var(--red); color: #fff; }
.cookie-banner-accept:hover, .cookie-btn-primary:hover { background: var(--red-dark); }
.cookie-banner-reject, .cookie-btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cookie-banner-reject:hover, .cookie-btn-secondary:hover { border-color: #fff; }
@media (max-width: 480px) {
.cookie-banner { flex-direction: column; align-items: stretch; }
.cookie-banner-actions { justify-content: flex-end; }
}
/* ---------- Bandeau disclaimer (home uniquement, en haut de page) ---------- */
.disclaimer-top {
background: #FDF3E7;
color: #7A5A00;
font-size: 12.5px;
text-align: center;
padding: 8px 20px;
line-height: 1.5;
}