/* Parlons Langues — 12/10/2026 — bleu profond, jaune soleil ; lisible, gauche-droite et droite-gauche (arabe) */
:root { --fond:#f7f9fb; --fond-2:#e8f0f5; --texte:#1d2b36; --doux:#55697a; --bleu:#16425b; --bleu-2:#2f6690; --soleil:#f6ae2d;
        --carte:#fff; --bord:#d9e3ea; --ombre:0 10px 28px rgba(22,66,91,.10); }
@media (prefers-color-scheme: dark) { :root { --fond:#0f1a22; --fond-2:#16252f; --texte:#e7eef3; --doux:#a9bccb; --bleu:#8fc1e3;
        --bleu-2:#b5d6ec; --carte:#17242e; --bord:#2a3a46; --ombre:0 10px 28px rgba(0,0,0,.35); } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin:0; background:var(--fond); color:var(--texte); font:18px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Arabic","Noto Sans Thai","Noto Sans SC",sans-serif; }
h1,h2,h3 { line-height:1.25; color:var(--bleu); }
h1 { font-size:clamp(1.9rem,5vw,2.8rem); margin:.2em 0 .5em; }
h2 { font-size:1.45rem; margin:1.6em 0 .5em; }
h2::after { content:""; display:block; width:48px; height:3px; margin-top:.4em; border-radius:3px; background:var(--soleil); }
a { color:var(--bleu-2); }
img { max-width:100%; height:auto; }
.largeur { max-width:1100px; margin:0 auto; padding:0 16px; }
.etroit { max-width:760px; }
.section { padding:1.5rem 16px 2.5rem; }
.haut { background:var(--carte); border-bottom:1px solid var(--bord); position:sticky; top:0; z-index:5; }
.haut-ligne { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:10px; padding-bottom:6px; flex-wrap:wrap; }
.marque { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--texte); font-weight:700; font-size:1.2rem; }
.marque small { display:block; font-size:.72rem; font-weight:400; color:var(--doux); letter-spacing:.08em; }
.logo { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--soleil); color:#16425b; font-weight:800; }
.langues { display:flex; gap:6px; flex-wrap:wrap; }
.langues a { text-decoration:none; font-size:.85rem; padding:.25em .7em; border:1px solid var(--bord); border-radius:999px; color:var(--doux); }
.langues a[aria-current] { background:var(--bleu); border-color:var(--bleu); color:#fff; }
.menu { display:flex; gap:4px 20px; flex-wrap:wrap; padding-bottom:8px; }
.menu a { text-decoration:none; color:var(--doux); }
.menu a:hover { color:var(--bleu); }
.accueil { background: radial-gradient(800px 380px at 90% -20%, rgba(246,174,45,.35), transparent 60%), linear-gradient(160deg,#16425b,#2f6690); color:#fff; padding:3rem 0; }
.accueil h1 { color:#fff; } .accueil p { color:#e6f0f7; font-size:1.1rem; max-width:720px; }
.bouton { display:inline-block; background:var(--soleil); color:#16425b; text-decoration:none; font-weight:700; padding:.75em 1.3em; border-radius:999px; margin:.3em .3em .3em 0; }
.bouton-clair { background:transparent; color:#fff; border:2px solid var(--soleil); }
.grille { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
.carte { background:var(--carte); border:1px solid var(--bord); border-radius:16px; padding:1.1rem 1.2rem; text-decoration:none; color:var(--texte);
  box-shadow:var(--ombre); transition:transform .18s, border-color .18s; display:flex; flex-direction:column; }
.carte:hover { transform:translateY(-3px); border-color:var(--soleil); }
.carte h3 { margin:0 0 .4em; font-size:1.08rem; } .carte p { color:var(--doux); font-size:.93rem; flex:1; } .carte span { color:var(--bleu-2); font-weight:600; }
.fil { color:var(--doux); font-size:.9rem; }
.chapo { font-size:1.12rem; }
.encadre { background:var(--fond-2); border-inline-start:5px solid var(--soleil); border-radius:12px; padding:1rem 1.2rem; margin-top:2rem; }
.bas { background:#16425b; color:#d8e6ef; padding:1.4rem 0; margin-top:2rem; } .bas a { color:#ffd27a; } .petit { font-size:.85rem; }
[dir="rtl"] body, [dir="rtl"] { text-align:right; }
[dir="rtl"] .bouton { margin:.3em 0 .3em .3em; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
@media (max-width:640px) { .haut { position:static; } body { font-size:17px; } }
.faq details { background:var(--carte); border:1px solid var(--bord); border-radius:12px; margin:.5rem 0; padding:.2rem 1rem; }
.faq summary { cursor:pointer; font-weight:700; padding:.7rem 0; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"＋"; color:var(--soleil); margin-inline-end:.6rem; }
.faq details[open] summary::before { content:"－"; }
.faq details p { margin:0 0 .9rem; color:var(--doux); }
article ul li { margin:.3em 0; }

/* ── Design enrichi 13/10/2026 ── */
.accueil { padding:3.5rem 0 4rem; position:relative; overflow:hidden; }
.accueil-grille { display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:center; }
.pastilles { list-style:none; padding:0; margin:1.2rem 0 1.4rem; display:flex; flex-wrap:wrap; gap:8px; }
.pastilles li { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; border-radius:999px; padding:.3em .9em; font-size:.92rem; font-weight:600; }
.illu { position:relative; min-height:320px; }
.illu::before { content:""; position:absolute; inset:8% 6%; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(246,174,45,.55), rgba(246,174,45,0) 70%); }
.bulle { position:absolute; transform:rotate(var(--r)); background:#fff; color:#16425b; font-weight:800; font-size:clamp(1.05rem,2.2vw,1.5rem);
  padding:.45em .95em; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.25); white-space:nowrap; animation:flotte 6s ease-in-out infinite; }
.bulle::after { content:""; position:absolute; bottom:-9px; left:22px; border:10px solid transparent; border-top-color:inherit; border-bottom:0; }
.bulle.b0 { background:#fff; } .bulle.b1 { background:#f6ae2d; animation-delay:-1s; } .bulle.b2 { background:#e8f0f5; animation-delay:-2s; }
.bulle.b3 { background:#ffd27a; animation-delay:-3s; } .bulle.b4 { background:#fff; color:#c0392b; animation-delay:-4s; } .bulle.b5 { background:#b5d6ec; animation-delay:-5s; }
.bulle.b1::after { border-top-color:#f6ae2d; } .bulle.b2::after { border-top-color:#e8f0f5; } .bulle.b3::after { border-top-color:#ffd27a; }
.bulle.b0::after, .bulle.b4::after { border-top-color:#fff; } .bulle.b5::after { border-top-color:#b5d6ec; }
@keyframes flotte { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
.chiffres { background:var(--carte); border-bottom:1px solid var(--bord); }
.chiffres-grille { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; padding-top:1.2rem; padding-bottom:1.2rem; }
.chiffres p { margin:0; color:var(--doux); font-weight:600; }
.chiffres strong { display:block; font-size:2.2rem; line-height:1.1; color:var(--bleu); }
.carte { position:relative; overflow:hidden; padding-top:1.5rem; }
.carte::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--soleil); }
.carte.c1::before { background:#2f6690; } .carte.c2::before { background:#3a7d44; } .carte.c3::before { background:#c0392b; }
.carte.c4::before { background:#8e44ad; } .carte.c5::before { background:#16a085; }
.carte-icone { display:inline-grid; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--fond-2); font-size:1.7rem; margin-bottom:.6rem; }
.carte .carte-lien { color:var(--bleu-2); font-weight:600; }
.carte:hover { box-shadow:0 16px 36px rgba(22,66,91,.18); }
.bandeau { background:radial-gradient(700px 300px at 85% -30%, rgba(246,174,45,.35), transparent 60%), linear-gradient(160deg,#16425b,#2f6690); color:#fff; padding:1.6rem 0 2rem; }
.bandeau h1 { color:#fff; margin-top:.1em; } .bandeau .fil, .bandeau .fil a { color:#d8e6ef; }
.bandeau-icone { font-size:2.6rem; margin:.3rem 0 0; line-height:1; }
.meta { margin:0; color:#ffd27a; font-weight:600; }
.sommaire { background:var(--carte); border:1px solid var(--bord); border-radius:14px; padding:.9rem 1.3rem; margin:1.5rem 0; box-shadow:var(--ombre); }
.sommaire-titre { margin:0 0 .3rem; font-weight:800; color:var(--bleu); }
.sommaire ol { margin:0; padding-inline-start:1.3rem; } .sommaire li { margin:.15em 0; } .sommaire a { text-decoration:none; }
h2[id] { scroll-margin-top:120px; }
article em { background:linear-gradient(transparent 60%, rgba(246,174,45,.35) 60%); font-style:italic; }
.bas { padding:2.2rem 0 1rem; }
.bas-grille { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; }
.bas-marque { display:flex; align-items:center; gap:10px; font-weight:800; color:#fff; font-size:1.15rem; margin-top:0; }
.bas-titre { color:#fff; font-weight:800; margin:0 0 .4rem; }
.bas-liens a, .bas-langues a { display:inline-block; margin:0 .9rem .3rem 0; text-decoration:none; }
[dir="rtl"] .bas-liens a, [dir="rtl"] .bas-langues a { margin:0 0 .3rem .9rem; }
.bas-fin { border-top:1px solid rgba(255,255,255,.15); padding-top:.8rem; margin-top:1rem; }
@media (max-width:820px) { .accueil-grille, .bas-grille { grid-template-columns:1fr; } .illu { min-height:230px; } }
@media (prefers-reduced-motion: reduce) { .bulle { animation:none; } }
/* positions des bulles (13/10/2026 : déplacées ici, la CSP interdit les styles en ligne) */
.bulle.b0 { left:8%; top:18%; --r:-6deg; } .bulle.b1 { left:52%; top:4%; --r:5deg; } .bulle.b2 { left:18%; top:52%; --r:4deg; }
.bulle.b3 { left:60%; top:40%; --r:-4deg; } .bulle.b4 { left:6%; top:82%; --r:3deg; } .bulle.b5 { left:48%; top:74%; --r:-5deg; }

/* logo image (13/10/2026) */
.logo-img { display:block; width:42px; height:42px; border-radius:12px; }