/*
 * La feuille de style du site public.
 *
 * Une seule pour toutes les pages — accueil, services, fiches produit, tarif,
 * mentions légales. Elles en portaient chacune une copie dans un <style> ; les
 * six copies avaient déjà commencé à diverger, et corriger un bouton demandait
 * six passages. Elle est servie avec une empreinte de version, donc mise en
 * cache longtemps sans jamais être périmée.
 *
 * LES COULEURS viennent du logiciel lui-même, pas d'une humeur : fond clair et
 * cartes blanches comme ProXP Mobile, bleu ardoise des barres et des boutons,
 * orange de la marque, et les cinq teintes du camembert pour faire vivre les
 * grilles d'icônes. Un site de logiciel doit ressembler au logiciel qu'il vend.
 */

:root {
    /* Les fonds, du plus clair au plus sombre. */
    --fond: #ffffff;
    --fond-doux: #f3f6fa;
    --ardoise: #3f4d5f;
    --ardoise-fonce: #333f4e;

    /* Les encres. L'orange ne sert jamais de couleur de texte sur blanc : à
       1,9 contre 1, il ne se lit pas. Il remplit, il souligne, il teinte — et
       c'est l'ardoise qui porte les liens. */
    --encre: #1f2937;
    --texte: #4b5768;
    --texte-doux: #78859a;
    --filet: #e3e9f0;
    --filet-fort: #cfd8e3;

    --orange: #f5a623;
    --orange-vif: #ffb940;
    --orange-sombre: #a96c08;
    --orange-voile: #fdf4e4;

    --rayon: 14px;
    --rayon-petit: 10px;

    /*
     * Le relief.
     *
     * Une seule ombre large donne une tache grise sous l'objet. Plusieurs
     * ombres superposées — une très serrée pour le contact, une moyenne pour la
     * hauteur, une large et très pâle pour l'ambiance — donnent une vraie
     * élévation. C'est de là que vient la troisième dimension, bien plus que
     * d'une perspective.
     */
    --ombre: 0 1px 1px rgba(23, 34, 51, .04), 0 2px 4px rgba(23, 34, 51, .04),
             0 8px 16px rgba(23, 34, 51, .05), 0 16px 32px rgba(23, 34, 51, .04);
    --ombre-forte: 0 2px 4px rgba(23, 34, 51, .06), 0 8px 16px rgba(23, 34, 51, .08),
                   0 24px 48px rgba(23, 34, 51, .12), 0 40px 80px rgba(23, 34, 51, .10);
    /* Le liseré clair sur l'arête haute : c'est lui qui fait qu'un objet paraît
       éclairé par le dessus, donc bombé, et non découpé dans du papier. */
    --biseau: inset 0 1px 0 rgba(255, 255, 255, .9);
    --transition: .18s cubic-bezier(.4, 0, .2, 1);
}

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

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    /* Inter. Dessinée pour les écrans : ses chiffres sont tabulaires, ses
       lettres ne se confondent pas aux petites tailles, et ses graisses lourdes
       tiennent un très grand titre sans s'empâter — ce que la précédente ne
       faisait pas. C'est aussi la police des interfaces que nos clients
       utilisent déjà toute la journée. */
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Le crénage et les ligatures d'Inter : sans cela elle rend comme une
       grotesque quelconque. */
    font-feature-settings: 'cv11', 'ss01';
    font-variant-ligatures: contextual common-ligatures;
}

/* Une seule famille, en gras pour les titres. Un empattement de revue donnait
   à la page un air d'article ; un logiciel se vend avec la typographie d'un
   logiciel. Cela économise aussi une requête de police. */
/* Un très grand titre se resserre, sinon il se disloque : l'interlettrage
   négatif croît avec le corps. C'est ce qui donne au titre d'accueil son bloc
   compact au lieu d'une suite de mots. */
h1, h2, h3, h4 { margin: 0; color: var(--encre); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: 60px; }
h2 { font-size: 38px; letter-spacing: -.03em; }
h3 { font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }
h4 { font-size: 15px; letter-spacing: -.01em; }
p { margin: 0; }
img, svg { max-width: 100%; }
strong { color: var(--encre); font-weight: 600; }

a { color: var(--ardoise); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--orange-sombre); }

/* L'ancre doit s'arrêter sous le menu collant, pas dessous. */
[id] { scroll-margin-top: 88px; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 32px; }
.etroit { max-width: 860px; }

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

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 22px; border-radius: var(--rayon-petit);
    font-size: 15px; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), transform var(--transition), box-shadow var(--transition);
}
/* Un bouton bombé s'enfonce quand on appuie : il monte au survol, retombe au
   clic, et son ombre suit. Sans ce retour, le relief n'est qu'un dessin. */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }

/* L'orange, en dégradé du clair au foncé avec une arête lumineuse en haut :
   c'est le bouton « Valider » du logiciel, bombé. L'encre sombre dessus passe
   le contraste là où l'orange sur blanc échouerait. */
.btn-primary {
    background: linear-gradient(180deg, #ffc55c 0%, #f5a623 45%, #e2920f 100%);
    color: #2a2008; border-color: #d2870c;
    box-shadow: var(--biseau), 0 1px 2px rgba(150, 97, 8, .3), 0 6px 14px rgba(245, 166, 35, .4);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-primary:hover {
    background: linear-gradient(180deg, #ffd27e 0%, #ffb53c 45%, #ef9f17 100%);
    color: #2a2008;
    box-shadow: var(--biseau), 0 2px 4px rgba(150, 97, 8, .3), 0 12px 26px rgba(245, 166, 35, .5);
}
.btn-primary:active { box-shadow: inset 0 2px 5px rgba(140, 90, 6, .4); }

/* L'ardoise : le bouton « Se connecter » de l'application mobile. */
.btn-ardoise {
    background: linear-gradient(180deg, #4e5e73 0%, #3f4d5f 50%, #334052 100%);
    color: #fff; border-color: #2c3847;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(23, 34, 51, .3),
                0 6px 14px rgba(63, 77, 95, .34);
}
.btn-ardoise:hover {
    background: linear-gradient(180deg, #5c6d84 0%, #4a596d 50%, #3c4a5d 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 4px rgba(23, 34, 51, .3),
                0 12px 26px rgba(63, 77, 95, .42);
}
.btn-ardoise:active { box-shadow: inset 0 2px 5px rgba(15, 22, 32, .45); }

.btn-cadre {
    border-color: var(--filet-fort); color: var(--encre);
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    box-shadow: var(--biseau), 0 1px 2px rgba(23, 34, 51, .06), 0 4px 10px rgba(23, 34, 51, .06);
}
.btn-cadre:hover {
    border-color: var(--ardoise); color: var(--ardoise);
    box-shadow: var(--biseau), 0 2px 4px rgba(23, 34, 51, .08), 0 10px 20px rgba(23, 34, 51, .1);
}
.btn-cadre:active { box-shadow: inset 0 2px 4px rgba(23, 34, 51, .1); }

.btn-large { padding: 16px 32px; font-size: 16px; }
/* La flèche avance d'un cheveu au survol : le bouton dit où il mène. */
.btn .fleche { transition: transform var(--transition); }
.btn:hover .fleche { transform: translateX(3px); }
[dir=rtl] .btn .fleche { transform: scaleX(-1); }
[dir=rtl] .btn:hover .fleche { transform: scaleX(-1) translateX(3px); }

/* Sur une bande sombre, les cadres s'éclaircissent. */
.sombre .btn-cadre { background: transparent; border-color: rgba(255, 255, 255, .32); color: #fff; }
.sombre .btn-cadre:hover { border-color: #fff; color: #fff; }

/* ------------------------------------------------- Bandes et têtes de section */

.bande { padding-block: 84px; }
/* Un dégradé, même imperceptible, donne de la profondeur à une bande ; un
   aplat la laisse plate. */
.bande-douce { background: linear-gradient(180deg, #eef3f9 0%, #f7fafd 50%, #eef3f9 100%);
               border-block: 1px solid var(--filet); }
/* La bande sombre : celle de la vidéo et de l'appel. Tout y passe en clair. */
.sombre { background: linear-gradient(165deg, #4a5a70 0%, #3f4d5f 45%, #2f3c4c 100%);
          color: rgba(255, 255, 255, .8);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.sombre h1, .sombre h2, .sombre h3 { color: #fff; }
/* :not(.btn) — sans cela, cette règle gagnait sur la couleur du bouton
   primaire (un sélecteur de plus), et le texte orange d'un bouton orange ne se
   voyait plus du tout. Un lien de texte sur fond sombre, oui ; un bouton, non :
   il porte déjà sa propre couleur. */
.sombre a:not(.btn) { color: var(--orange); }
.sombre a:not(.btn):hover { color: var(--orange-vif); }

.surtitre {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--orange-sombre); margin-bottom: 14px;
}
.surtitre::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--orange); }
.sombre .surtitre { color: var(--orange); }

.tete { max-width: 62ch; }
.tete .sous { font-size: 17px; margin-top: 14px; }
.tete-centre { max-width: 60ch; margin-inline: auto; text-align: center; }
.tete-centre .surtitre::before { display: none; }
/* Titre à gauche, note à droite : la disposition des sections qui listent. */
.tete-ligne { display: grid; grid-template-columns: 1fr .8fr; gap: 40px; align-items: end; }
.tete-ligne .note { font-size: 15.5px; color: var(--texte-doux); }
.accent { color: var(--orange-sombre); }
.sombre .accent { color: var(--orange); }

/* -------------------------------------------------------- Cartes et tuiles */

.carte {
    display: flex; flex-direction: column; padding: 26px;
    border: 1px solid var(--filet); border-radius: var(--rayon);
    /* Blanc en haut, tres legerement teinte en bas : la carte paraît bombee,
       éclairée depuis le haut de la page. */
    background: linear-gradient(180deg, #ffffff 0%, #fafcfe 100%);
    color: inherit;
    box-shadow: var(--biseau), 0 1px 2px rgba(23, 34, 51, .05), 0 4px 10px rgba(23, 34, 51, .04);
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
a.carte:hover { border-color: var(--filet-fort); color: inherit; transform: translateY(-5px); box-shadow: var(--ombre-forte); }
.carte h3 { margin-bottom: 7px; }
.carte p { font-size: 14.5px; color: var(--texte); }
/* margin-top: auto — le lien descend au bas de la carte. Sans cela il se
   posait juste après le texte, et huit cartes de longueurs différentes
   donnaient huit liens à huit hauteurs. */
.carte .suite { display: inline-flex; align-items: center; gap: 5px;
                margin-top: auto; padding-top: 16px;
                font-size: 13.5px; font-weight: 600; color: var(--ardoise); }
a.carte:hover .suite { color: var(--orange-sombre); }

/*
 * La tuile qui porte le dessin.
 *
 * Elle est teintée, et les teintes tournent : vingt et une icônes du même
 * orange formaient une grille qui ne respirait pas — c'est ce qui donnait à la
 * page son air éteint. Les cinq couleurs sont celles du camembert du logiciel,
 * donc la page reste la sienne. La teinte est attribuée par le gabarit à partir
 * du nom de l'icône : la même icône garde la même couleur d'une page à l'autre.
 */
.tuile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; flex: none; align-self: flex-start;
    border-radius: 16px; margin-bottom: 18px;
    /* Le galet : un dégradé du clair au foncé, une arête lumineuse en haut, et
       une ombre portée de sa propre couleur. C'est ce qui le pose au-dessus de
       la carte au lieu de le peindre dessus. */
    background: linear-gradient(160deg, var(--tuile-haut) 0%, var(--tuile-fond) 55%, var(--tuile-bas) 100%);
    color: var(--tuile-encre, var(--orange-sombre));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                inset 0 -1px 0 var(--tuile-bas),
                0 2px 4px var(--tuile-ombre), 0 6px 14px var(--tuile-ombre);
    transition: transform var(--transition), box-shadow var(--transition);
}
.tuile svg { width: 27px; height: 27px; display: block;
             filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)); }
a.carte:hover .tuile, .env-carte:hover .tuile, .valeur:hover .tuile {
    transform: translateY(-2px) scale(1.06) rotate(-3deg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 var(--tuile-bas),
                0 4px 8px var(--tuile-ombre), 0 12px 24px var(--tuile-ombre);
}

/* Les cinq teintes du camembert : clair en haut, couleur au milieu, un ton
   plus soutenu en bas — et l'ombre portée prend la même teinte. */
.t1 { --tuile-haut: #fff3f1; --tuile-fond: #fbdcd6; --tuile-bas: #f3c4bb; --tuile-encre: #b5342a; --tuile-ombre: rgba(192, 57, 43, .18); }
.t2 { --tuile-haut: #fffaea; --tuile-fond: #fbeec4; --tuile-bas: #f2dd9f; --tuile-encre: #97730a; --tuile-ombre: rgba(169, 129, 10, .18); }
.t3 { --tuile-haut: #f4fbec; --tuile-fond: #e0f2cd; --tuile-bas: #c9e5ac; --tuile-encre: #466f22; --tuile-ombre: rgba(79, 122, 40, .18); }
.t4 { --tuile-haut: #f0f7fd; --tuile-fond: #d8e8f6; --tuile-bas: #bcd6ed; --tuile-encre: #225379; --tuile-ombre: rgba(39, 96, 143, .18); }
.t5 { --tuile-haut: #f1fafe; --tuile-fond: #d7eefa; --tuile-bas: #b9e0f4; --tuile-encre: #216a93; --tuile-ombre: rgba(42, 123, 168, .18); }

.grille-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }

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

label, .label-faux { display: block; font-size: 13.5px; font-weight: 600; color: var(--encre); margin-bottom: 7px; }
.opt { font-weight: 400; color: var(--texte-doux); }

input[type=text], input[type=tel], input[type=email], input[type=url],
input[type=password], input[type=number], select, textarea {
    width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
    color: var(--encre);
    /* Un champ se creuse : dégradé inversé — sombre en haut — et ombre
       intérieure. C'est l'envers du bouton, et cela se lit sans y penser. */
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 42%);
    border: 1px solid var(--filet-fort); border-radius: var(--rayon-petit);
    box-shadow: inset 0 2px 3px rgba(23, 34, 51, .055);
    transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--orange); background: #fff;
    box-shadow: inset 0 2px 3px rgba(23, 34, 51, .04), 0 0 0 3px rgba(245, 166, 35, .26);
}
textarea { resize: vertical; min-height: 110px; }
.err { font-size: 12.5px; color: #c0392b; margin-top: 6px; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }

/* Les trois temps du formulaire de demande. */
fieldset.groupe { border: 0; margin: 0 0 26px; padding: 0; }
.groupe:last-of-type { margin-bottom: 20px; }
.groupe legend { display: flex; align-items: center; gap: 11px; padding: 0; margin-bottom: 16px;
                 font-size: 15.5px; font-weight: 700; color: var(--encre); }
.groupe .rang {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: none; border-radius: 50%;
    background: linear-gradient(180deg, #ffc55c 0%, #f5a623 50%, #e2920f 100%);
    color: #2a2008; font-size: 13px; font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 5px rgba(245, 166, 35, .45);
}

/* Les pastilles : le bouton radio lui-même est masqué — mais pas retiré du
   parcours au clavier — et la pastille entière devient la cible, bien plus
   large qu'un rond de treize pixels. */
.pastilles { display: flex; flex-wrap: wrap; gap: 9px; }
.pastille input { position: absolute; opacity: 0; width: 0; height: 0; }
.pastille span {
    display: inline-block; padding: 9px 17px; border-radius: 999px;
    border: 1px solid var(--filet-fort); font-size: 14px; color: var(--texte);
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
    box-shadow: var(--biseau), 0 1px 2px rgba(23, 34, 51, .06);
    cursor: pointer; transition: all var(--transition);
}
.pastille span:hover { border-color: var(--ardoise); transform: translateY(-1px);
                       box-shadow: var(--biseau), 0 3px 8px rgba(23, 34, 51, .1); }
.pastille input:checked + span {
    border-color: #d2870c; color: #2a2008;
    background: linear-gradient(180deg, #ffd27e 0%, #f5a623 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 8px rgba(245, 166, 35, .4);
}
.pastille input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

/*
 * Le piège à robots : caché sans display:none, que certains d'entre eux savent
 * ignorer. Rogné à taille nulle plutôt que rejeté hors écran — à gauche, la
 * page arabe s'ouvrirait décalée d'autant, c'est-à-dire vide.
 */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap; }

.done { border-radius: var(--rayon); padding: 30px; background: #edf9f1; border: 1px solid #a9ddbd; }
.done h2 { font-size: 22px; }
.done p { font-size: 15px; margin-top: 10px; }

/* -------------------------------------------------- Barre d'annonce et menu */

/*
 * La pastille d'annonce, posée au-dessus du titre.
 *
 * Elle remplace la bande sombre pleine largeur qui coiffait la page : celle-ci
 * repoussait le titre vers le bas et pesait autant qu'un menu pour une seule
 * phrase. Dans le hero, la même phrase se lit au moment où elle sert.
 */
.puce-hero {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 18px 8px 14px; margin-bottom: 26px;
    border: 1px solid var(--filet-fort); border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
    box-shadow: var(--biseau), 0 1px 2px rgba(23, 34, 51, .05), 0 4px 12px rgba(23, 34, 51, .05);
    font-size: 14px; font-weight: 600; color: var(--ardoise);
}
.puce-hero::before {
    content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #ffd27e, #f5a623 60%, #d9890b);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, .18);
}


/* L'en-tête flotte au-dessus du contenu : une ombre douce l'en détache, et
   elle s'accentue dès que la page défile (voir le petit script des gabarits). */
.top { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .88);
       backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--filet);
       box-shadow: 0 1px 2px rgba(23, 34, 51, .04);
       transition: box-shadow var(--transition), background var(--transition); }
.top.defile { background: rgba(255, 255, 255, .96);
              box-shadow: 0 1px 2px rgba(23, 34, 51, .06), 0 8px 24px rgba(23, 34, 51, .08); }
.top-inner { display: flex; align-items: center; gap: 22px; padding: 13px 0; }

.marque { display: inline-flex; align-items: center; gap: 11px; }
.marque img { width: 36px; height: 30px; object-fit: contain; }
.marque b { font-size: 20px; font-weight: 800; color: var(--encre); letter-spacing: -.02em; }
.marque .tag { font-size: 10.5px; font-weight: 700; letter-spacing: .15em; color: var(--texte-doux); }

.menu { display: flex; align-items: center; gap: 26px; margin-inline: auto;
        font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.menu a { color: var(--texte); }
.menu a { position: relative; padding-block: 4px; }
.menu a:hover { color: var(--orange-sombre); }
/* La page qu'on lit se signale par un trait sous son nom : c'est plus lisible
   qu'une nuance de couleur, et cela survit au daltonisme. */
.menu a.actif { color: var(--encre); font-weight: 600; }
.menu a.actif::after {
    content: ''; position: absolute; inset-inline: 0; bottom: -2px; height: 2.5px;
    border-radius: 2px; background: var(--orange);
}
.actions-top { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.actions-top .muted { color: var(--texte-doux); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ardoise); cursor: pointer; }
.linkish:hover { color: var(--orange-sombre); }

.langue { display: inline-flex; align-items: center; gap: 6px; color: var(--texte);
          border: 1px solid var(--filet-fort); border-radius: 999px; padding: 6px 14px;
          font-size: 13.5px; font-weight: 600; }
.langue:hover { border-color: var(--orange); color: var(--orange-sombre); }

/* ------------------------------------------------------------- Pied de page */

footer { background: linear-gradient(180deg, #46556a 0%, #36434f 100%);
         color: rgba(255, 255, 255, .74);
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.foot-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px;
             padding-top: 58px; padding-bottom: 40px; }
.foot-cols h3 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
                color: rgba(255, 255, 255, .55); margin-bottom: 16px; }
.foot-cols a { display: block; font-size: 14.5px; color: rgba(255, 255, 255, .82); margin-bottom: 11px; }
.foot-cols a:hover { color: var(--orange); }
.foot-marque .marque b { color: #fff; }
.foot-marque .marque .tag { color: rgba(255, 255, 255, .5); }
.foot-marque .slogan { font-size: 15.5px; color: #fff; font-weight: 600; margin-top: 16px; }
.foot-marque .desc { font-size: 14.5px; margin-top: 9px; max-width: 40ch; }
.foot-marque .adresse { font-size: 14px; color: rgba(255, 255, 255, .55); margin-top: 14px; }
.foot-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
            padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .14);
            font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.foot-bas a { color: rgba(255, 255, 255, .7); }
.foot-bas a:hover { color: var(--orange); }
.foot-fin { margin-inline-start: auto; }

/* Le pied court, pour les pages de texte. */
.foot-simple { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
               padding-block: 22px; font-size: 14px; }
.foot-simple a { color: rgba(255, 255, 255, .82); }
.foot-simple a:hover { color: var(--orange); }

/* ------------------------------------------------------- Bouton WhatsApp */

/* Au-dessus de la page, dans le coin : une action disponible à tout moment,
   pas une étape à la fin. */
.wa {
    position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #5ef09a 0%, #25d366 52%, #14a94e 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
                0 2px 6px rgba(13, 110, 50, .4), 0 10px 26px rgba(37, 211, 102, .45);
    transition: transform var(--transition), box-shadow var(--transition);
}
.wa:hover { background: #25d366; color: #fff; transform: scale(1.07); box-shadow: 0 12px 30px rgba(37, 211, 102, .5); }

/* --------------------------------------------------- Pages de texte (gabarit) */

main.page { padding-top: 48px; padding-bottom: 76px; }
.retour { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px;
          color: var(--texte-doux); margin-bottom: 20px; }
.retour:hover { color: var(--orange-sombre); }
.page h1 { font-size: 38px; }
.chapeau { font-size: 18px; color: var(--texte); margin-top: 18px; max-width: 64ch; }
.page p { margin-bottom: 15px; }

/* ------------------------------------------------------------ Adaptations */

@media (max-width: 1220px) {
    h1 { font-size: 38px; }
    h2 { font-size: 27px; }
    .grille-cartes { grid-template-columns: repeat(3, 1fr); }
    /* Le menu central s'efface avant de pousser la page de côté. */
    .menu { display: none; }
}

@media (max-width: 900px) {
    .wrap { padding-inline: 20px; }
    .bande { padding-block: 56px; }
    .tete-ligne { grid-template-columns: 1fr; gap: 16px; }
    .grille-cartes { grid-template-columns: 1fr 1fr; gap: 16px; }
    .row { grid-template-columns: 1fr; gap: 0; }
    .foot-cols { grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 42px; }
    .foot-fin { margin-inline-start: 0; }
    main.page { padding-top: 30px; padding-bottom: 50px; }
    .page h1 { font-size: 28px; }
    .chapeau { font-size: 16.5px; }
}

@media (max-width: 560px) {
    /*
     * L'en-tête d'un téléphone ne tient pas trois actions à côté de la marque :
     * il débordait de cent trente pixels et faisait glisser toute la page.
     * « Se connecter » s'efface — un client sait où le trouver — et le bouton
     * de langue se réduit à son globe, qui se comprend sans son mot.
     */
    .hide-sm { display: none !important; }
    .langue { padding: 9px; gap: 0; font-size: 0; }
    .langue svg { width: 17px; height: 17px; }

    h1 { font-size: 29px; }
    h2 { font-size: 23px; }
    .btn { padding: 11px 18px; font-size: 14.5px; }
    .btn-large { padding: 14px 22px; font-size: 15px; }
    .marque .tag { display: none; }
    .grille-cartes { grid-template-columns: 1fr; gap: 12px; }
    /* Le dessin passe à côté du texte : la carte tient en trois lignes au lieu
       de six, et une liste de treize services redevient parcourable au pouce. */
    .carte { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: start; padding: 18px; }
    .carte .tuile { grid-row: 1 / span 3; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 0; }
    .carte .tuile svg { width: 22px; height: 22px; }
    .carte .suite { margin-top: 9px; }
    .foot-cols { grid-template-columns: 1fr; gap: 26px; }
}

/* ------------------------------------------- Lecture de droite à gauche */

/* La feuille emploie partout des propriétés logiques (inset-inline,
   padding-inline, margin-inline) : elles se retournent d'elles-mêmes. Ne
   restent ici que les rares exceptions. */
[dir=rtl] body { font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', sans-serif; }
[dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3, [dir=rtl] h4 { letter-spacing: 0; }
[dir=rtl] .surtitre { letter-spacing: .03em; }
/* « UltraSoft » et « PLATFORM » restent deux mots latins dans une page arabe :
   seul l'interlettrage change, pas leur ordre. */
[dir=rtl] .marque .tag, [dir=rtl] .foot-cols h3 { letter-spacing: .04em; }
[dir=rtl] .retour svg { transform: scaleX(-1); }

/* Qui a demandé moins de mouvement n'en reçoit aucun. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .btn:hover, a.carte:hover, .wa:hover { transform: none; }
    a.carte:hover .tuile { transform: none; }
}