/* =====================================================================
   WebApp — signature graphique
   Chargée après site.css : elle n'ajoute que, sans réécrire la structure.

   Trois gestes, répétés partout, qui rendent l'interface reconnaissable
   sans la surcharger :
     1. le COIN COUPÉ, en haut à droite des cartes et des cadres ;
     2. le LISÉRÉ AMBRE, sous les surtitres et sur l'élément actif ;
     3. le HALO SARCELLE, lumière diffuse des blocs sombres.
   L'ambre est réservé à l'action et aux chiffres ; le sarcelle porte la
   structure. Aucun des deux n'est employé en aplat sur du texte long.
   ===================================================================== */

/* ------------------------------------------------- 1. le coin coupé */
.card,
.mock,
.appframe,
.spotlight,
.post-card,
.contact-card,
.kcard {
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
/* Le coin coupé casse le rayon : on le compense visuellement. */
.card, .post-card, .contact-card { border-top-right-radius: 0; }

/* Repère ambre posé dans l'angle coupé, révélé au survol. */
.card, .post-card, .spotlight { position: relative; }
.card::after,
.post-card::after,
.spotlight::after {
    content: "";
    position: absolute; inset-block-start: 0; inset-inline-end: 0;
    width: 18px; height: 18px;
    background: var(--accent);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    opacity: 0;
    transition: opacity .22s ease;
}
a.card:hover::after,
a.post-card:hover::after,
.spotlight:hover::after { opacity: 1; }
[dir="rtl"] .card::after,
[dir="rtl"] .post-card::after,
[dir="rtl"] .spotlight::after { clip-path: polygon(0 0, 0 100%, 100% 0); }

/* ------------------------------------------------ 2. le liséré ambre */
.eyebrow {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--accent);
    color: var(--brand);
}
:root[data-theme="dark"] .eyebrow { color: var(--brand); }

/* Élément de navigation actif : souligné en ambre, jamais en fond plein. */
.nav__link.is-active,
.nav__link[aria-current="page"] {
    color: var(--ink);
    box-shadow: inset 0 -3px 0 var(--accent);
}

/* Titres de section : un trait court avant le texte. */
.section__head h2::before {
    content: "";
    display: block;
    width: 46px; height: 3px;
    margin-bottom: 14px;
    background: var(--grad-amber);
}
.section__head { }

/* ------------------------------------------------ 3. le halo sarcelle */
.hero,
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.hero::after,
.page-hero::after {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(52% 46% at 14% 16%, rgba(63, 191, 174, .28) 0%, transparent 68%),
        radial-gradient(40% 40% at 88% 6%, rgba(232, 163, 61, .20) 0%, transparent 70%);
}

/* Trame technique très discrète, rappel du quadrillage d'un plan. */
.hero::before {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 76%);
}

/* ------------------------------------ boutons : la couleur d'action
   UNE SEULE CHOSE PORTE CETTE COULEUR : l'action principale. Pas les
   titres, pas les chiffres, pas les bordures de carte — celles-là restent
   à la couleur de structure. Sur une page donnée le rouge apparaît trois ou
   quatre fois ; au-delà il cesse de vouloir dire quelque chose.

   Le texte ne dit plus « blanc » : mesuré, du blanc sur l'ambre de la
   palette sarcelle ne donne que 2,16:1. L'encre est déclarée par la palette,
   avec le fond qu'elle doit habiller. Voir palettes.css. */
/* « .btn.btn--accent » et non « .btn--accent ». Ce n'est pas une coquetterie :
   plus bas dans ce même fichier, « .btn { color: #ffffff } » a la même
   spécificité (0,1,0) et arrive après — il gagnait. Constaté à l'écran en
   thème sombre : le bouton s'affichait blanc sur #F2666B, soit 3,05:1, alors
   que l'encre prévue en donne 6,18. Doubler la classe passe à (0,2,0) et
   règle le conflit sans toucher à la règle générale, qui a ses raisons.
   Les deux sélecteurs contextuels, eux, étaient déjà assez spécifiques. */
/* PLUS DE SÉLECTEUR POSITIONNEL. « .hero__cta .btn:first-child » décidait de
   la couleur d'action d'après la PLACE du bouton. Résultat constaté sur
   l'accueil : dans le bandeau du produit phare, c'est « Découvrir » qui
   passait en rouge, tandis que « Réserver un appel », juste à côté, restait
   en fantôme. La position n'est pas l'intention. La classe est posée dans le
   gabarit, sur l'action réelle, page par page. */
.btn.btn--accent {
    background: var(--action);
    border-color: var(--action);
    color: var(--action-ink);
    font-weight: 600;
}
.btn.btn--accent:hover {
    background: var(--action-600);
    border-color: var(--action-600);
    color: var(--action-ink);
}
/* Le halo de focus suit l'action : un contour vert autour d'un bouton rouge
   annoncerait la mauvaise couleur. */
.btn.btn--accent:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 3px;
}

/* ------------------------------------------ chiffres et statistiques */
.stats .num,
.kpi2 .num,
.mock__kpis strong {
    background: var(--grad-amber);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .stats .num, .kpi2 .num, .mock__kpis strong { color: var(--accent); }
}

/* --------------------------------------------- relief au survol */
.card, .post-card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
a.card:hover, a.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* La maquette se redresse au survol au lieu de rester figée. */
.mock { transition: transform .45s ease; }
.mock:hover { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }

/* --------------------------------------------- sélection de texte */
::selection { background: var(--accent-050); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: var(--brand-050); color: var(--ink); }

/* ------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .card, .post-card, .mock { transition: none; }
    a.card:hover, a.post-card:hover, .mock:hover { transform: none; }
}

/* ------------------------------------------------------ téléphone */
@media (max-width: 640px) {
    /* Le coin coupé reste lisible mais discret sur petit écran. */
    .card, .mock, .appframe, .spotlight, .post-card, .contact-card, .kcard {
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    }
    .card::after, .post-card::after, .spotlight::after { width: 12px; height: 12px; }
    .section__head h2::before { width: 36px; margin-bottom: 10px; }
}

/* ---------------------------------------- nom de marque bicolore
   Seul élément du site aux couleurs du drapeau marocain : « Web » en vert,
   « App » en rouge. Le reste de l'interface suit la palette choisie dans
   les réglages — ces deux teintes sont donc volontairement écrites en dur.
   Contrastes sur fond clair : vert 7,4:1, rouge 6,3:1. */
.brand__name--a { color: #0B6E43; }
.brand__name--b { color: #C1272D; }
:root[data-theme="dark"] .brand__name--a { color: #4FBF8B; }
:root[data-theme="dark"] .brand__name--b { color: #F2666B; }

/* ------------------------------------- lisibilité des boutons
   L'accent est désormais un vert foncé : le texte des boutons pleins passe
   en blanc. Et sur les blocs sombres, un bouton fantôme au texte vert
   foncé était illisible (1,6:1) — il prend le blanc et une bordure claire. */
.btn { color: #ffffff; }
.btn--light { color: var(--brand); }
.btn--ghost { color: var(--brand); border-color: currentColor; background: transparent; }

/*
 * Bouton fantome sur fond SOMBRE uniquement.
 *
 * « .page-hero » figurait dans cette liste par assimilation avec « .hero ».
 * Or les deux n'ont rien a voir : .hero (accueil) et .cta-band portent un
 * degrade vert fonce, tandis que .page-hero est un bandeau CLAIR — mesure :
 * luminance 0,94, texte fonce. Le bouton « Reserver » y etait donc peint en
 * blanc sur un fond a peine teinte : contraste 1,07:1, autrement dit
 * invisible. On ne le decouvrait qu'en le cherchant a la souris.
 *
 * Le piege est le meme que celui deja rencontre sur ce site : deduire la
 * clarte d'un bloc de son NOM plutot que de sa couleur. Le signal fiable est
 * la couleur du texte environnant — .hero et .cta-band ont un texte de
 * luminance 1,0 ; .page-hero, 0,05.
 */
.hero .btn--ghost,
.cta-band .btn--ghost,
.site-footer .btn--ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .55);
}
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.site-footer .btn--ghost:hover {
    background: #ffffff;
    color: var(--brand);
    border-color: #ffffff;
}

/* Sur le bandeau clair des pages interieures, le bouton secondaire prend le
   vert de la marque et un fond blanc franc : il se detache du bandeau menthe
   sans rivaliser avec le bouton principal. */
/* Jetons volontairement restreints a ceux qui existent dans TOUTES les
   palettes : --brand-200 n'est defini nulle part, et --brand-050 change de
   sens d'une palette a l'autre (clair ici, tres fonce ailleurs). --line et
   --surface sont, eux, la bordure et la surface standard du site. */
.page-hero .btn--ghost {
    color: var(--brand);
    background: var(--surface, #ffffff);
    border-color: var(--line);
}
.page-hero .btn--ghost:hover {
    background: var(--surface-2, #f4f8f6);
    border-color: var(--brand);
}

/* Sur les fonds sombres (pied de page, administration), les deux teintes du
   nom sont éclaircies : le vert et le rouge foncés y tombent sous 3:1. */
.site-footer .brand__name--a,
.admin .brand__name--a { color: #4FBF8B; }
.site-footer .brand__name--b,
.admin .brand__name--b { color: #F2666B; }

/* ------------------------- mention legale non renseignee
   Un identifiant manquant (RC, ICE) doit se voir : sur une page a portee
   juridique, un blanc discret se publie sans que personne le remarque. */
.a-completer {
    display: inline-block;
    padding: 1px 8px;
    border: 1px dashed #C1272D;
    border-radius: 4px;
    background: rgba(193, 39, 45, .07);
    color: #C1272D;
    font-size: .88em;
    font-style: italic;
}

/* ------------------------------------------- symbole de la marque */
.brand__img {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    display: block;
}
.site-footer .brand__img { width: 30px; height: 30px; flex-basis: 30px; }
@media (max-width: 640px) { .brand__img { width: 30px; height: 30px; flex-basis: 30px; } }

/* -------------------------------------- logo complet (drapeau + nom)
   Hauteur fixe, largeur libre : le rapport du fichier fait le reste. */
.brand__lockup { height: 44px; width: auto; display: block; }
.site-footer .brand__lockup { height: 40px; }
@media (max-width: 640px) { .brand__lockup { height: 38px; } }

/* Teintes eclaircies, posees par le script quand le fond mesure est sombre.
   Vert 6,1:1 et rouge 4,9:1 sur #001C15 ; les teintes foncees y donnaient
   1,4:1 et 1,9:1, illisibles. */
.brand__name--clair .brand__name--a { color: #4FBF8B; }
.brand__name--clair .brand__name--b { color: #F2666B; }

/* =====================================================================
   Frise « Notre demarche »

   Une colonne, un axe a gauche, la meme structure a toutes les tailles.
   Tout est ecrit en proprietes LOGIQUES (inset-inline-start, padding-inline)
   pour que l'arabe se retourne sans une seule regle [dir="rtl"].
   ===================================================================== */
.timeline {
    list-style: none;
    /* Bornee a 860 px : sur un ecran large, la carte atteignait 1048 px, soit
       plus de 130 caracteres par ligne, ramenes a ~84. Au-dela de ~80 l'oeil
       perd la ligne suivante en revenant a la marge. */
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
}

.timeline__item {
    position: relative;
    padding-inline-start: 76px;
    padding-bottom: 26px;
}
.timeline__item:last-child { padding-bottom: 0; }

/* L'axe : un filet entre deux pastilles. Il part sous la pastille courante
   et descend jusqu'en bas de l'element, donc jusqu'a la suivante. Le dernier
   n'en a pas : un axe qui depasse dans le vide se lit comme une etape
   manquante. */
.timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 25px;
    inset-block-start: 54px;
    inset-block-end: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), var(--brand-050));
    border-radius: 2px;
}
.timeline__item:last-child::before { display: none; }

/* La pastille numerotee */
.timeline__node {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #ffffff;
    font-size: var(--t-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 5px var(--surface), 0 2px 10px rgba(0, 0, 0, .12);
}

.timeline__card {
    position: relative;
    overflow: hidden;            /* borne le filigrane */
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg, 14px);
    padding: 18px 20px;
}

/* Le filigrane de l'etape : son icone en grand, attenuee, dans l'angle.
   L'illustration de la carte. Elle est ancree en HAUT et non en bas comme
   celle des services : la carte d'etape se termine par le bloc
   « Livrable / Votre part », et un dessin derriere ces deux colonnes de texte
   court les rendrait sales. En haut, elle n'a que le retour de ligne du
   marqueur derriere elle. */
/* ENTIER, comme sur les cartes de services. Deborde de la carte, il ne
   montrait que deux chevrons coupes en biais pour l'etape « developpement »,
   ou un bout de fusee pour la bascule : des fragments qui passent pour un
   defaut d'affichage. Il se pose maintenant tout entier dans la bande haute
   que le marqueur et le titre, tous deux courts, laissent libre a droite —
   au-dessus du corps du texte, qui lui court d'un bord a l'autre des 780 px
   de la carte. */
.timeline__ghost {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 18px;
    color: var(--brand);
    opacity: .13;
    pointer-events: none;
    user-select: none;
}
.timeline__ghost .icon {
    width: 44px; height: 44px;
    stroke-width: 1.4;          /* a 44 px, un trait de 1,1 s'efface */
}
[dir="rtl"] .timeline__ghost .icon { transform: scaleX(-1); }

/* Duree et numero d'etape : la premiere chose lue, donc la plus discrete
   typographiquement mais la plus contrastee en couleur. */
.timeline__marker {
    position: relative;          /* au-dessus du filigrane */
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    color: var(--accent);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}
/* L'icone nette, devant la duree. Pas de pastille ici : la pastille
   numerotee est a 20 px de la, deux ronds cote a cote se disputeraient le
   depart de la ligne. Un trace nu suffit, il partage la couleur du marqueur. */
.timeline__ic {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}
.timeline__ic .icon { width: 17px; height: 17px; }
[dir="rtl"] .timeline__ic .icon { transform: scaleX(-1); }

/* position:relative sur le texte : sans cela il passe SOUS le filigrane, qui
   est peint apres lui dans l'ordre du document. */
.timeline__title { position: relative; font-size: var(--t-lg); margin: 0 0 .4em; line-height: 1.3; }
.timeline__body  { position: relative; margin: 0; color: var(--muted); font-size: var(--t-base); line-height: 1.65; }

/* Livrable / Votre part : deux colonnes sur grand ecran, empilees des que
   la place manque. minmax(0, 1fr) et non 1fr : sans cela un mot long
   pousse la colonne au-dela du conteneur. */
.timeline__meta {
    position: relative;
    display: grid;
    /* Deux colonnes fixes, pas auto-fit : avec minmax + auto-fit, la grille
       creait une troisieme piste de 0 px et son gap de 20 px se voyait a
       droite. Les paires sont toujours au nombre de deux. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}
.timeline__pair { min-width: 0; }
.timeline__meta dt {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 3px;
}
.timeline__meta dd {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--muted);
    line-height: 1.55;
}

/* ------------------------------------------------------- tablette */
@media (max-width: 780px) {
    .timeline__item { padding-inline-start: 62px; padding-bottom: 22px; }
    .timeline__node { width: 44px; height: 44px; font-size: var(--t-base); }
    .timeline__item::before { inset-inline-start: 21px; inset-block-start: 46px; }
    /* Carte plus etroite : le titre passe sur deux lignes et remonte le corps.
       Le trace se reduit d'autant. */
    .timeline__ghost { inset-block-start: 14px; inset-inline-end: 14px; }
    .timeline__ghost .icon { width: 36px; height: 36px; }
}

/* ------------------------------------------------------- telephone */
@media (max-width: 560px) {
    /* Sous 560 px, un retrait de 62 px ne laisse que ~290 px de texte : les
       mots se coupent. On remonte la pastille au-dessus de la carte, l'axe
       disparait, et la carte prend toute la largeur. Le numero reste, c'est
       lui qui porte l'ordre. */
    .timeline__item { padding-inline-start: 0; padding-bottom: 16px; }
    .timeline__item::before { display: none; }
    .timeline__node {
        /* position: relative et NON static : z-index n'a aucun effet sur un
           element statique, la pastille passait donc DERRIERE la carte, qui
           est peinte apres elle. Constate sur telephone. */
        position: relative;
        width: 38px;
        height: 38px;
        font-size: var(--t-base);
        margin-bottom: -19px;
        margin-inline-start: 16px;
        z-index: 1;
    }
    .timeline__card { padding: 30px 16px 16px; }
    .timeline__meta { grid-template-columns: 1fr; gap: 12px; }
    /* Sous 560 px la pastille numerotee CHEVAUCHE le haut de la carte
       (margin-bottom negatif). Un filigrane ancre au meme endroit passerait
       juste derriere elle et l'on verrait deux dessins superposes : il
       descend sous la pastille. */
    /* Sur telephone, la pastille numerotee vient chevaucher le haut de la
       carte, qui gagne 30 px de retrait. Le trace se loge dans ce retrait,
       cote fin — la ou la pastille n'est pas. C'est la seule bande libre, et
       elle suffit maintenant que le dessin est entier et petit : la version
       debordante, elle, avait du etre supprimee a cette taille d'ecran. */
    .timeline__ghost { inset-block-start: 6px; inset-inline-end: 12px; }
    .timeline__ghost .icon { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .timeline__item { transition: none; }
}

/* ------------------------------------------------- polices arabes
   Constat : le titre en vedette de la page d'accueil s'affichait
   « ??????? ?????? ??????? » en arabe. Les octets envoyes etaient pourtant du
   bon UTF-8 : le probleme venait de la POLICE. --font-head vaut Poppins, qui
   ne contient aucun glyphe arabe, et le repli ne se faisait pas proprement
   sous background-clip: text.
   On redefinit donc les deux jetons de police pour l'arabe seulement. */
html[lang="ar"] {
    --font-head: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", Arial, sans-serif;
    --font-sans: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", Arial, sans-serif;
}
/* L'arabe n'a pas de capitales : les mises en majuscules produisent du bruit
   sans rien signifier. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .badge-saas,
html[lang="ar"] .timeline__meta dt,
html[lang="ar"] .argues__title { text-transform: none; }

/* Lien d'evitement : hors de vue tant qu'il n'a pas le focus.
   Masquage par decoupe et non par decalage negatif : un « left: -9999px »
   etend la zone defilable en arabe (deja constate deux fois sur ce site). */
.skip-link {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
    position: fixed;
    inset-block-start: 10px; inset-inline-start: 10px;
    width: auto; height: auto; margin: 0; padding: 12px 18px;
    clip-path: none; z-index: 999;
    background: var(--brand); color: #fff;
    border-radius: var(--r-md, 10px);
}