/* ============================================================
   Papail — feuille de style
   ------------------------------------------------------------
   Parti pris : papier chaud plutot que tableau de bord sombre,
   un serif de titrage pour la personnalite, une seule couleur
   d'accent franche. Les bords sont nets, les ombres rares : ce
   qui distingue un site pense d'un site assemble, c'est la
   retenue, pas les effets.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --papier:      #faf6f0;
    --papier-2:    #f3ece2;
    --encre:       #16130f;
    --encre-doux:  #6b6256;
    --trait:       #ddd2c3;
    --accent:      #d4451f;
    --accent-fonce:#a8340f;
    --foret:       #15403a;
    --succes:      #2f6f4e;
    --alerte:      #8a5a00;
    --danger:      #a8321f;

    --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
    --texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Barre du haut ------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    border-bottom: 1px solid var(--trait);
    background: var(--papier);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--titre);
    font-size: 23px;
    font-weight: 700;
    color: var(--encre);
    letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand span { color: var(--accent); }

/* Le papillon ne doit jamais se laisser ecraser par le nom a cote : flex:none
   le protege, et il garde sa taille meme sur un telephone etroit. */
.brand-marque { width: 27px; height: 27px; flex: none; }

.topbar nav { display: flex; gap: 26px; align-items: center; }
/* Le :not(.btn) compte : sans lui, cette regle l emporte sur .btn par simple
   poids de selecteur, et le bouton "Creer un compte" de la barre s affichait
   en gris delave sur son fond orange au lieu du blanc. */
.topbar nav a:not(.btn) { color: var(--encre-doux); font-size: 15px; font-weight: 500; }
.topbar nav a:not(.btn):hover { color: var(--encre); text-decoration: none; }

.container { max-width: 1040px; margin: 0 auto; padding: 56px 32px 80px; }

/* --- Titres -------------------------------------------------------------- */

h1 {
    font-family: var(--titre);
    font-size: clamp(34px, 5.5vw, 54px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0 0 20px;
}

h2 {
    font-family: var(--titre);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 72px 0 24px;
}

h3 { font-family: var(--titre); font-size: 21px; font-weight: 700; margin: 0 0 6px; }

.lead {
    font-size: 19px;
    color: var(--encre-doux);
    max-width: 60ch;
    margin: 0 0 40px;
}

/* --- Accroche de la page d'accueil --------------------------------------- */

.hero { padding: 16px 0 8px; }

.hero-note {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}

/* --- Les trois etapes ----------------------------------------------------
   Numerotees et separees par un trait plutot que posees dans trois boites
   identiques : la lecture suit alors un ordre, au lieu de presenter trois
   choix equivalents. */

.etapes { display: grid; gap: 0; margin: 48px 0 8px; border-top: 1px solid var(--trait); }

.etape {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 26px 0;
    border-bottom: 1px solid var(--trait);
}

.etape-num {
    font-family: var(--titre);
    font-size: 30px;
    font-weight: 500;
    color: var(--accent);
    line-height: 1;
}

.etape h3 { margin: 0 0 4px; font-size: 19px; }
.etape p { margin: 0; color: var(--encre-doux); }

/* --- Cartes et encadres --------------------------------------------------- */

.card {
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: 4px;
    padding: 28px;
    margin-bottom: 20px;
}

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.stat {
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: 4px;
    padding: 22px;
}
.stat-label {
    color: var(--encre-doux);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.stat-value {
    font-family: var(--titre);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 8px 0 4px;
}
.stat-sub { color: var(--encre-doux); font-size: 14px; margin: 0; }

.bar { height: 4px; background: var(--papier-2); border-radius: 99px; overflow: hidden; margin-top: 12px; }
.bar > span { display: block; height: 100%; background: var(--accent); }

/* --- Formulaires ---------------------------------------------------------- */

label { display: block; margin-bottom: 7px; color: var(--encre); font-size: 14px; font-weight: 600; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], select, textarea {
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: 4px;
    color: var(--encre);
    font-size: 16px;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 69, 31, .13);
}

.field { margin-bottom: 20px; }
.hint { color: var(--encre-doux); font-size: 13px; margin-top: 7px; }

/* --- Boutons -------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 13px 24px;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
}
.btn:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); text-decoration: none; color: #fff; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-ghost { background: transparent; border-color: var(--trait); color: var(--encre); }
.btn-ghost:hover { background: var(--papier-2); border-color: var(--encre-doux); color: var(--encre); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-bloc { display: block; width: 100%; text-align: center; }

/* Connexion par un service tiers : volontairement sobre, pour que le bouton
   principal reste celui du site. */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: 4px;
    color: var(--encre);
    font-size: 15px;
    font-weight: 600;
}
.btn-google:hover { background: var(--papier-2); text-decoration: none; }
.btn-google svg { width: 18px; height: 18px; flex: none; }

.separateur {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--encre-doux);
    font-size: 13px;
}
.separateur::before, .separateur::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--trait);
}

/* --- Tableaux ------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--trait); }
th {
    color: var(--encre-doux);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
tbody tr:last-child td { border-bottom: 0; }

/* --- Etiquettes et messages ----------------------------------------------- */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    background: var(--papier-2);
    color: var(--encre-doux);
    border: 1px solid var(--trait);
}
.badge-ok { color: var(--succes); border-color: rgba(47, 111, 78, .35); background: rgba(47, 111, 78, .07); }
.badge-warn { color: var(--alerte); border-color: rgba(138, 90, 0, .3); background: rgba(138, 90, 0, .07); }
.badge-err { color: var(--danger); border-color: rgba(168, 50, 31, .3); background: rgba(168, 50, 31, .07); }

.alert {
    padding: 14px 18px;
    border-radius: 4px;
    margin-bottom: 22px;
    border: 1px solid;
    border-left-width: 3px;
    font-size: 15px;
}
.alert-success { background: rgba(47, 111, 78, .08); border-color: rgba(47, 111, 78, .35); color: #255a3f; }
.alert-error { background: rgba(168, 50, 31, .08); border-color: rgba(168, 50, 31, .35); color: #8b2a19; }
.alert-info { background: rgba(21, 64, 58, .07); border-color: rgba(21, 64, 58, .3); color: var(--foret); }

/* --- Forfaits -------------------------------------------------------------
   Le forfait du milieu est mis en avant par un fond sombre : un seul element
   different attire l'oeil mieux que trois cartes identiques. */

.plan {
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: 4px;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
}
.plan .price {
    font-family: var(--titre);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 14px 0 4px;
}
.plan .price small { font-size: 15px; color: var(--encre-doux); font-weight: 400; font-family: var(--texte); }
.plan ul { list-style: none; padding: 0; margin: 20px 0 26px; flex: 1; }
.plan li { padding: 9px 0; border-bottom: 1px solid var(--trait); color: var(--encre-doux); font-size: 15px; }
.plan li:last-child { border-bottom: 0; }
.plan li strong { color: var(--encre); font-weight: 600; }

.plan-phare { background: var(--foret); border-color: var(--foret); color: #f2ece2; }
.plan-phare h3, .plan-phare .price { color: #fff; }
.plan-phare li { color: #c9d6cf; border-bottom-color: rgba(255,255,255,.14); }
.plan-phare li strong { color: #fff; }
.plan-phare .price small { color: #c9d6cf; }
.plan-phare .btn { background: var(--accent); border-color: var(--accent); }

.plan-etiquette {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

/* --- Bloc explicatif sombre ------------------------------------------------ */

.encadre-sombre {
    background: var(--foret);
    color: #e6ded2;
    border-radius: 4px;
    padding: 40px;
    margin: 24px 0;
}
.encadre-sombre h2 { color: #fff; margin: 0 0 16px; font-size: 26px; }
.encadre-sombre p { margin: 0; max-width: 62ch; }
.encadre-sombre strong { color: #fff; }

/* --- Pages de connexion ---------------------------------------------------- */

.auth-box { max-width: 420px; margin: 56px auto; }
.auth-box h1 { font-size: 32px; margin-bottom: 8px; }
.auth-box .lead { font-size: 16px; margin-bottom: 30px; }

.muted { color: var(--encre-doux); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* --- Derniere porte, en bas de l'accueil --------------------------------- */

/* Le visiteur qui finit la page est celui qui a tout lu : c'est le moment
   ou il decide. Lui demander de remonter chercher le bouton en haut, c'est
   le perdre. */
.rappel {
    background: var(--foret);
    border-radius: 4px;
    padding: 52px 40px 46px;
    margin: 56px 0 8px;
    text-align: center;
}

.rappel-marque { width: 54px; height: 54px; display: block; margin: 0 auto 18px; }

.rappel h2 {
    color: #fff;
    margin: 0 0 26px;
    font-size: 30px;
    letter-spacing: -0.02em;
}

.rappel-boutons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Sur le vert sombre, le bouton secondaire doit s'eclairer : un contour
   sombre sur un fond sombre ne se voit pas. */
.btn-clair {
    background: transparent;
    color: #e6ded2;
    border: 1px solid rgba(230, 222, 210, .45);
}
.btn-clair:hover { background: rgba(230, 222, 210, .1); color: #fff; }

.rappel-note { margin: 18px 0 0; color: #b9ae9d; font-size: 14px; }

@media (max-width: 680px) {
    .rappel { padding: 38px 22px 34px; }
    .rappel h2 { font-size: 24px; }
    .rappel-boutons { flex-direction: column; }
}

.footer {
    border-top: 1px solid var(--trait);
    padding: 32px;
    text-align: center;
    color: var(--encre-doux);
    font-size: 14px;
}

.footer-marque { width: 26px; height: 26px; display: block; margin: 0 auto 12px; }

/* Un bouton ne se coupe jamais en deux lignes : sur un petit ecran, le texte
   passerait sous le fond et se chevaucherait. */
.btn, .btn-sm { white-space: nowrap; }

/* --- Choix de la langue ---------------------------------------------------
   Un menu natif : il s'ouvre comme le visiteur s'y attend sur son telephone,
   et il fonctionne sans javascript. */

.choix-langue {
    width: auto;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--encre-doux);
    background: transparent;
    border: 1px solid var(--trait);
    border-radius: 4px;
    cursor: pointer;
}
.choix-langue:focus { box-shadow: none; border-color: var(--encre-doux); }

/* --- Ecriture de droite a gauche ------------------------------------------
   L'arabe ne se contente pas d'une traduction : la page entiere se lit en
   miroir. Tout ce qui portait une direction doit basculer, sinon le numero
   d'une etape se retrouve du mauvais cote et le liseré d'une alerte pointe
   dans le vide. */

[dir="rtl"] {
    /* Fraunces ne dessine pas l'alphabet arabe : on laisse les polices du
       systeme, qui le rendent correctement sur tous les telephones. */
    --titre: 'Segoe UI', 'Noto Kufi Arabic', 'Geeza Pro', Tahoma, sans-serif;
    --texte: 'Segoe UI', 'Noto Naskh Arabic', 'Geeza Pro', Tahoma, sans-serif;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .brand, [dir="rtl"] .price, [dir="rtl"] .stat-value {
    letter-spacing: 0;
}

/* Le nom de la marque est en lettres latines : il se lit de gauche a droite
   meme au milieu d'une page arabe. Sans ca, le papillon passait a droite et
   on lisait "ail Pap". */
[dir="rtl"] .brand { direction: ltr; }

[dir="rtl"] .alert { border-left-width: 1px; border-right-width: 3px; }
[dir="rtl"] .etape { grid-template-columns: 1fr 56px; }
[dir="rtl"] .etape-num { order: 2; text-align: left; }

/* Les chiffres et les montants restent lus de gauche a droite, sinon
   "39,90 $" s'afficherait a l'envers au milieu d'une phrase arabe. */
[dir="rtl"] .price, [dir="rtl"] .stat-value { direction: ltr; text-align: right; }

@media (max-width: 680px) {
    .container { padding: 36px 20px 56px; }
    .topbar { padding: 14px 18px; gap: 12px; }
    .topbar nav { gap: 16px; font-size: 14px; }
    .brand { font-size: 20px; }
    .topbar nav .btn-sm { padding: 8px 13px; font-size: 13px; }
    h2 { margin-top: 52px; font-size: 25px; }
    .encadre-sombre { padding: 28px 22px; }
    .etape { grid-template-columns: 40px 1fr; gap: 14px; }
    table { font-size: 13px; }
    th, td { padding: 10px 8px; }
}

/* Sous 420 px, seul le titre se reduit : la barre, elle, tient deja sur une
   seule ligne grace a la regle a 560 px. */
@media (max-width: 420px) {
    h1 { font-size: 30px; }
}
}

/* ============================================================
   Accroche : montrer plutot que decrire
   ------------------------------------------------------------
   Un visiteur decide en quelques secondes. Une capture du produit
   en action vaut mieux qu'un paragraphe, d'ou ce telephone dessine
   entierement en CSS : aucune image a charger, net sur tous les
   ecrans, et il s'anime sans une ligne de javascript.
   ============================================================ */

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
    padding: 28px 0 12px;
}

/* Apparition douce au chargement, decalee d'un element a l'autre :
   l'oeil suit l'ordre de lecture au lieu de tout recevoir d'un coup. */
@keyframes monte {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.hero-note, .hero-grid h1, .hero-grid .lead, .hero-actions, .hero-garanties {
    animation: monte .6s cubic-bezier(.22, .61, .36, 1) backwards;
}
.hero-grid h1        { animation-delay: .06s; }
.hero-grid .lead     { animation-delay: .12s; }
.hero-actions        { animation-delay: .18s; }
.hero-garanties      { animation-delay: .24s; }

.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; }

.hero-garanties { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--encre-doux); }
.hero-garanties span { display: inline-flex; align-items: center; gap: 7px; }
.hero-garanties svg { width: 15px; height: 15px; flex: none; color: var(--succes); }

/* --- Le telephone ---------------------------------------------------------- */

.mockup { display: flex; justify-content: center; animation: monte .7s cubic-bezier(.22,.61,.36,1) .2s backwards; }

.tel {
    width: 272px;
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: 26px;
    padding: 12px;
    box-shadow: 0 24px 60px -24px rgba(22, 19, 15, .3);
    position: relative;
}

.tel-barre { display: flex; align-items: center; gap: 9px; padding: 4px 4px 11px; }
.tel-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #e8a33d);
    flex: none;
}
.tel-pseudo { font-size: 13px; font-weight: 600; }
.tel-lieu { font-size: 11px; color: var(--encre-doux); }

.tel-image {
    height: 190px;
    border-radius: 10px;
    background:
        radial-gradient(120% 90% at 20% 15%, rgba(255,255,255,.5), transparent 60%),
        linear-gradient(150deg, #1d4f46, #2f6f54 45%, #d4451f);
    position: relative;
    overflow: hidden;
}

/* Les coeurs montent en continu, a des rythmes volontairement differents :
   trois elements synchronises donneraient l'impression d'une machine. */
.tel-image i {
    position: absolute;
    bottom: -22px;
    font-style: normal;
    font-size: 17px;
    animation: flotte 3.4s ease-in infinite;
    opacity: 0;
}
.tel-image i:nth-child(1) { left: 20%; animation-delay: .2s; }
.tel-image i:nth-child(2) { left: 48%; animation-delay: 1.3s; font-size: 14px; }
.tel-image i:nth-child(3) { left: 73%; animation-delay: 2.2s; font-size: 20px; }

@keyframes flotte {
    0%   { opacity: 0; transform: translateY(0) scale(.7); }
    18%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-168px) scale(1.1); }
}

.tel-actions { display: flex; gap: 14px; padding: 12px 4px 6px; font-size: 16px; }
.tel-compteur { padding: 0 4px 6px; font-size: 13px; font-weight: 600; }
.tel-compteur b { font-variant-numeric: tabular-nums; }
.tel-legende { padding: 0 4px 6px; font-size: 12px; color: var(--encre-doux); line-height: 1.45; }

/* L'etiquette qui dit ce qui se passe : c'est elle qui raconte l'histoire. */
.tel-badge {
    position: absolute;
    top: 64px;
    /* Du cote du texte, et non vers l'exterieur de la page : place a droite,
       l'etiquette sortait du conteneur et se faisait couper. */
    inset-inline-start: -22px;
    /* Les blocs qui suivent sont positionnes eux aussi : sans z-index,
       l image du telephone recouvrait la moitie de l etiquette. */
    z-index: 2;
    background: var(--foret);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 99px;
    box-shadow: 0 8px 20px -8px rgba(22,19,15,.45);
    white-space: nowrap;
    animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* --- Bandeau de confiance -------------------------------------------------- */

.confiance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2px;
    background: var(--trait);
    border: 1px solid var(--trait);
    border-radius: 4px;
    overflow: hidden;
    margin: 44px 0 0;
}
.confiance > div { background: var(--papier); padding: 20px 22px; }
.confiance strong { display: block; font-family: var(--titre); font-size: 19px; margin-bottom: 3px; }
.confiance span { font-size: 14px; color: var(--encre-doux); }

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    /* Le telephone passe sous le texte : sur un ecran etroit, l'accroche
       doit rester la premiere chose lue. */
    .mockup { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
    /* Certains visiteurs demandent l'arret des animations, parfois pour des
       raisons medicales. On respecte ce reglage sans discuter. */
    .hero-note, .hero-grid h1, .hero-grid .lead, .hero-actions,
    .hero-garanties, .mockup, .tel-image i, .tel-badge {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* --- Blocs de code (documentation de l'API) --------------------------------
   Lus par des developpeurs, souvent copies-colles : la lisibilite prime sur
   l'elegance. Fond sombre, chasse fixe, et un defilement horizontal plutot
   qu'un retour a la ligne qui casserait une commande en deux. */

code {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: .92em;
    background: rgba(22, 19, 15, .06);
    padding: 2px 6px;
    border-radius: 5px;
}

pre {
    background: var(--foret);
    color: #eef3f0;
    border-radius: 12px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 0 0 14px;
    line-height: 1.55;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: 13px;
    white-space: pre;
}

/* L'arabe et l'hebreu inversent la page, jamais le code : une commande lue de
   droite a gauche ne veut plus rien dire. */
[dir="rtl"] pre,
[dir="rtl"] code {
    direction: ltr;
    text-align: left;
}

/* --- Apercu du compte Instagram --------------------------------------------
   Le client voit sa propre photo apparaitre et reconnait son compte d'un coup
   d'oeil. C'est plus sur qu'un pseudo relu trois fois, et ca attrape surtout
   les comptes prives avant le paiement plutot qu'apres. */

.apercu {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--trait);
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
}

.apercu img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--trait);
}

.apercu-chiffre { color: var(--encre-doux); }
.apercu-attente { color: var(--encre-doux); font-style: italic; }
.apercu-ok      { border-color: var(--succes); }
.apercu-ko      { border-color: var(--accent); }

.apercu-alerte {
    flex-basis: 100%;
    margin: 4px 0 0;
    color: var(--accent);
}

/* Petite mention sous les boutons de l'accroche : "sans carte, sans
   engagement". Elle leve la derniere hesitation juste au moment du clic,
   la ou elle compte, plutot que dans un paragraphe plus bas. */
.hero-note-petit {
    font-size: 13px;
    color: var(--encre-doux);
    flex-basis: 100%;
    margin-top: -4px;
}

/* --- Bandeau de l'essai gratuit --------------------------------------------
   Un compte a rebours visible plutot qu'une date de fin : "il te reste 2
   jours" se comprend sans calculer, et le bouton est juste a cote, au moment
   exact ou la question se pose. */

.essai-bandeau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--foret);
    color: #eef3f0;
}

.essai-bandeau strong { display: block; font-size: 15px; }
.essai-bandeau span   { font-size: 14px; opacity: .85; }

/* Le bouton doit ressortir sur le fond sombre, pas s'y fondre. */
.essai-bandeau .btn {
    background: #fff;
    color: var(--foret);
    border-color: #fff;
    flex: none;
}

/* --- Liste de suggestions de comptes ---------------------------------------
   Le meme geste que dans la barre de recherche d'Instagram : on tape, les
   comptes apparaissent avec leur photo, on clique sur le sien. Plus sur que
   relire un pseudo trois fois. */

.apercu-liste {
    display: block;
    padding: 6px;
}

.suggestion {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: none;
    font: inherit;
    font-size: 14px;
    text-align: start;
    color: inherit;
    cursor: pointer;
}

.suggestion:hover,
.suggestion:focus-visible {
    background: var(--papier-fonce, rgba(22, 19, 15, .05));
}

.suggestion img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--trait);
}

.suggestion strong { font-weight: 600; }
.suggestion .muted { font-size: 13px; }

/* --- Tableau de bord --------------------------------------------------------
   Quatre chiffres par ligne sur grand ecran, deux sur tablette, un sur
   telephone : un chiffre qu'on doit chercher ne sert a rien. */

.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid-4 { grid-template-columns: 1fr; } }

/* Un chiffre dans le rouge se voit avant d'etre lu. */
.stat-rouge { color: var(--accent); }

/* Barre de proportion des pays : la longueur se compare d'un coup d'oeil,
   bien plus vite qu'une colonne de nombres. */
.jauge {
    height: 8px;
    border-radius: 99px;
    background: rgba(22, 19, 15, .08);
    overflow: hidden;
}

.jauge span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--foret);
}

/* --- Barre de la gestion ----------------------------------------------------
   Fond sombre, pour qu'on sache au premier coup d'oeil qu'on n'est plus du
   cote client. Deux endroits qui se ressemblent finissent par etre confondus,
   et on publie alors dans l'un ce qu'on destinait a l'autre. */

.topbar-gestion {
    background: var(--foret);
    border-bottom-color: rgba(255, 255, 255, .12);
}

/* Meme precaution que pour la barre du site : un bouton garde sa propre
   couleur, il ne prend pas celle des liens qui l entourent. */
.topbar-gestion .brand,
.topbar-gestion nav a:not(.btn) {
    color: #eef3f0;
}

.topbar-gestion nav a:not(.btn):hover { color: #fff; }

/* La gestion a plus de rubriques que le site client. Sur un ecran etroit, la
   barre passe a la ligne au lieu de couper le dernier lien en deux. */
.topbar-gestion nav {
    flex-wrap: wrap;
    row-gap: 6px;
}

@media (max-width: 760px) {
    .topbar-gestion { flex-wrap: wrap; row-gap: 10px; }
    .topbar-gestion nav { font-size: 14px; }
}

/* --- Tableaux sur petit ecran -----------------------------------------------
   Un tableau de six colonnes ne rentre pas dans un telephone. Plutot que de
   le comprimer jusqu'a l'illisible ou de couper les colonnes de droite -- ce
   qui cache justement les statuts et les dates --, on le laisse defiler
   horizontalement. Le doigt fait le reste.

   display:block sur le tableau suffit a le rendre defilant ; aucune balise a
   ajouter dans les pages, donc aucune page a risquer de casser. */

@media (max-width: 760px) {
    .card > table,
    .card > form + table,
    main > table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        /* L'elan du doigt s'arrete proprement sur une colonne. */
        -webkit-overflow-scrolling: touch;
    }

    /* Une ombre a droite tant qu'il reste quelque chose a voir : sans elle,
       personne ne devine qu'il faut faire glisser. */
    .card > table,
    main > table {
        background:
            linear-gradient(to right, var(--papier) 30%, rgba(250, 246, 240, 0)) left center / 28px 100% no-repeat,
            linear-gradient(to left, var(--papier) 30%, rgba(250, 246, 240, 0)) right center / 28px 100% no-repeat,
            radial-gradient(farthest-side at 0 50%, rgba(22, 19, 15, .14), transparent) left center / 12px 100% no-repeat,
            radial-gradient(farthest-side at 100% 50%, rgba(22, 19, 15, .14), transparent) right center / 12px 100% no-repeat;
        background-attachment: local, local, scroll, scroll;
    }

    .card > table th,
    .card > table td {
        white-space: nowrap;
    }
}

/* --- Menu du compte ---------------------------------------------------------
   Construit avec <details> : le navigateur gere l'ouverture, la fermeture et
   le clavier. Aucun javascript, donc rien qui puisse ne pas charger. */

.menu {
    position: relative;
    display: inline-block;
}

.menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--trait);
    border-radius: 99px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La fleche par defaut de <details> n'a rien a faire dans une barre de menu. */
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ''; }

.menu > summary::after {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: .55;
}

.menu[open] > summary { border-color: var(--encre-doux); }

.menu-liste {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    z-index: 30;
    min-width: 215px;
    padding: 6px;
    border: 1px solid var(--trait);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 40px -16px rgba(22, 19, 15, .35);
}

.menu-liste a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 15px;
    white-space: nowrap;
}

.menu-liste a:hover { background: rgba(22, 19, 15, .05); }

/* Le dernier lien ferme la session : un trait le separe du reste pour qu'on
   ne clique pas dessus en visant celui du dessus. */
.menu-liste a:last-child {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--trait);
}

/* --- Cloche, menu a trois traits, messagerie --------------------------------
   Structure reprise des panels que tout le monde connait : une cloche pour ce
   que le site a a dire, trois traits pour le reste. Les couleurs, elles,
   restent les notres. */

.cloche {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--trait);
    border-radius: 50%;
    color: var(--encre-doux);
    flex: none;
}

.cloche:hover { color: var(--encre); border-color: var(--encre-doux); }
.cloche svg { width: 19px; height: 19px; }

.pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Sur la cloche, la pastille se pose sur le bord ; dans une liste, elle suit
   simplement le texte. */
.cloche .pastille {
    position: absolute;
    top: -3px;
    inset-inline-end: -3px;
    border: 2px solid var(--papier);
    height: 20px;
}

.pastille-liste { margin-inline-start: 6px; }

.menu-traits { gap: 9px; }

/* Les trois traits, dessines en bordures : aucune image a charger. */
.traits {
    width: 16px;
    height: 2px;
    flex: none;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.menu-nom { overflow: hidden; text-overflow: ellipsis; }

/* Sous 420 px, le nom disparait : les trois traits suffisent a comprendre
   qu'il y a un menu, et la barre tient enfin sur une ligne. */
@media (max-width: 420px) {
    .menu-nom { display: none; }
    .menu > summary { max-width: none; padding: 8px 12px; }
}

/* --- Fil de discussion ------------------------------------------------------
   Deux alignements, comme dans n'importe quelle messagerie : ce qui vient de
   soi d'un cote, ce qui vient de l'autre en face. On lit qui parle sans avoir
   a lire le nom. */

.fil { display: flex; flex-direction: column; gap: 12px; }

.bulle { max-width: 82%; }

.bulle-corps {
    padding: 12px 15px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.55;
}

.bulle-date { margin-top: 5px; font-size: 12px; color: var(--encre-doux); }

.bulle-moi { align-self: flex-end; }
.bulle-moi .bulle-corps { background: var(--foret); color: #eef3f0; border-bottom-right-radius: 4px; }
.bulle-moi .bulle-date { text-align: end; }

.bulle-eux { align-self: flex-start; }
.bulle-eux .bulle-corps { background: #fff; border: 1px solid var(--trait); border-bottom-left-radius: 4px; }

textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--trait);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    resize: vertical;
}

textarea:focus { outline: none; border-color: var(--encre-doux); }

/* --- Ligne de notification --------------------------------------------------- */

.avis-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--trait);
}

.avis-ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.avis-ligne:first-child { padding-top: 0; }

/* Une notification jamais ouverte porte une marque a gauche : on repere en un
   coup d'oeil ce qu'on n'a pas encore lu. */
.avis-neuf {
    border-inline-start: 3px solid var(--accent);
    padding-inline-start: 13px;
    margin-inline-start: -16px;
}

/* --- Barre du haut, version compacte ----------------------------------------
   Une action a droite, un menu a trois traits, et c'est tout. Les quatre
   liens poses cote a cote passaient a la ligne sur telephone : l'en-tete
   prenait alors un tiers de l'ecran avant le premier mot de la page. */

.menu-langues {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 2px;
    padding: 10px 12px 4px;
    border-top: 1px solid var(--trait);
}

.menu-langue {
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--encre-doux);
}

.menu-langue:hover { background: rgba(22, 19, 15, .05); color: var(--encre); }

.menu-langue-active {
    background: var(--foret);
    color: #eef3f0;
}

.menu-langue-active:hover { background: var(--foret); color: #fff; }

/* Le bloc des langues est deja separe par son trait : le dernier lien du menu
   n'a pas besoin du sien quand il le suit. */
.menu-langues + a { margin-top: 0; padding-top: 9px; border-top: 0; }

/* Sur telephone, la barre reste sur une ligne : logo a gauche, action et menu
   a droite. Plus de retour a la ligne, plus de selecteur de langue qui
   deborde. */
@media (max-width: 560px) {
    .topbar { flex-wrap: nowrap; justify-content: space-between; padding: 14px 18px; }
    .topbar nav { width: auto; flex-wrap: nowrap; gap: 10px; }
    .brand { font-size: 19px; }
    .topbar nav .btn-sm { padding: 8px 14px; font-size: 13px; }
    .menu-liste { min-width: 210px; }
}

/* Les deux portes cote a cote dans la barre : se connecter et s'inscrire.
   Cachee dans le menu, la connexion obligeait un client qui revient a
   chercher -- alors que c'est le geste qu'il fait le plus souvent. */
.lien-connexion { white-space: nowrap; }

@media (max-width: 560px) {
    /* A trois elements plus le logo, chaque pixel compte : on resserre
       plutot que de laisser la barre passer a la ligne. */
    .topbar { padding: 14px 14px; }
    .topbar nav { gap: 9px; }
    .lien-connexion { font-size: 14px; }
    .topbar nav .btn-sm { padding: 8px 12px; font-size: 13px; }
    .brand { font-size: 18px; }
}

/* Le bouton d'inscription porte deux libelles : le long sur grand ecran, le
   court sur telephone. Un seul des deux est affiche a la fois. */
.libelle-court { display: none; }

@media (max-width: 560px) {
    .libelle-long  { display: none; }
    .libelle-court { display: inline; }
}

/* Liens du pied de page. Le contact doit se voir depuis n'importe quelle
   page : c'est la premiere chose qu'un moderateur de processeur de paiement
   va chercher, et son absence suffit a faire rejeter un dossier. */
.footer-liens {
    margin: 8px 0 0;
    font-size: 14px;
}

.footer-liens a { color: var(--encre-doux); }
.footer-liens a:hover { color: var(--encre); }

/* Champ piege du formulaire de contact : invisible pour un humain, rempli
   par les robots. Cache par le style et non par type="hidden" -- les robots
   ignorent les champs caches par attribut, beaucoup moins ceux-la. */
.piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Le prix dans la monnaie reellement debitee, sous le prix affiche. Discret
   mais present : le client doit le lire avant de cliquer, pas le decouvrir
   sur la page de paiement. */
.equivalent {
    margin: -10px 0 14px;
    font-size: 14px;
    color: var(--encre-doux);
}

/* Montants de rechargement : des boutons plutot qu'un champ vide. Choisir
   dans une liste demande un clic ; deviner le montant attendu fait hesiter,
   et celui qui hesite ne recharge pas. */
.montants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.montants .btn { flex: none; }

/* Le montant en dollars, et sous lui ce qui sera reellement preleve en
   francs. Le revendeur ne doit pas decouvrir la vraie somme sur la page de
   paiement : c'est la qu'on perd les gens. */
.montant-choix {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.25;
    padding-top: 8px;
    padding-bottom: 8px;
}

.montant-choix small {
    font-size: 11px;
    font-weight: 500;
    color: var(--encre-doux);
    white-space: nowrap;
}

.montant-choix:hover small { color: inherit; }