/* ==========================================================================
   SITEK — les composants propres a la vitrine
   ---------------------------------------------------------------------------
   Charge APRES css/styles.css, qui vient du socle et n'est pas modifie. Tout
   ce qui est ici est ce que le socle ne porte pas : les deux cartes de
   demonstration, le cadre qui les ouvre, et la grille tarifaire.

   AUCUNE VALEUR HEX. Les jetons de css/tokens.css portent la couleur ; une
   valeur ecrite ici echapperait au prochain changement d'identite.
   ========================================================================== */

/* ==========================================================================
   Le fond de page
   --------------------------------------------------------------------------
   styles.css pose un calque plein ecran derriere toute la page et lit son
   contenu dans --fond-image, dont la valeur par defaut est la photo
   d'ambiance des boutiques (images/fond-salon.webp). Ce site ne l'embarque
   pas : sans cette ligne, le navigateur demanderait un fichier absent a
   chaque chargement, et repondrait 404 quatre fois.

   La valeur elle-meme est dans css/tokens.css sous --halo-fond. Cette
   redefinition doit vivre ICI et pas la-bas : styles.css declare
   --fond-image apres tokens.css, et a specificite egale la derniere
   declaration l'emporte.
   ========================================================================== */
:root{--fond-image:var(--halo-fond);}

/* ==========================================================================
   Les deux cartes de demonstration
   --------------------------------------------------------------------------
   C'est la section que la page existe pour amener. Elles sont donc plus
   grandes que les cartes ordinaires, cliquables en entier, et elles montrent
   l'outil plutot que de le decrire.
   ========================================================================== */

.demos-grille{display:grid;gap:18px;margin-top:28px;}

.demo-carte{
  display:flex;flex-direction:column;gap:14px;
  text-align:start;width:100%;
  padding:24px;border-radius:18px;
  background:var(--fond-2);
  border:1px solid var(--ligne);
  box-shadow:var(--ombre-douce);
  color:inherit;font:inherit;cursor:pointer;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.demo-carte:hover{
  border-color:var(--orange);
  transform:translateY(-2px);
  box-shadow:var(--shadow-accent);
}
.demo-carte:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}

/* L'icone. Un carre d'accent dilue plutot qu'un pictogramme seul : a 44 px
   elle se lit comme un bouton, et c'est bien ce qu'elle est. */
.demo-icone{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--voile-orange);
  border:1px solid var(--voile-accent-moyen);
  color:var(--orange-vif);
}
.demo-icone svg{width:26px;height:26px;display:block;}

.demo-carte h3{margin:0;font-size:1.22rem;color:var(--texte-0);}
.demo-carte p{margin:0;color:var(--texte-3);font-size:.95rem;}

/* La ligne d'appel. Elle porte la fleche, et la fleche avance au survol —
   le seul mouvement de la carte, sur le seul element qui promet une action. */
.demo-lien{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:auto;padding-top:6px;
  color:var(--orange-vif);font-weight:700;font-size:.95rem;
}
.demo-lien svg{width:16px;height:16px;transition:transform .16s;}
/* La fleche suit le sens de lecture : en arabe elle part vers la gauche. */
.demo-carte:hover .demo-lien svg{transform:translateX(3px);}
[dir="rtl"] .demo-carte:hover .demo-lien svg{transform:translateX(-3px);}
[dir="rtl"] .demo-lien svg{transform:scaleX(-1);}
[dir="rtl"] .demo-carte:hover .demo-lien svg{transform:scaleX(-1) translateX(3px);}

/* L'apercu : une bande qui laisse voir le haut de l'outil. Elle est en
   `overflow:hidden` avec une hauteur fixe, donc l'image reelle est coupee —
   c'est voulu, une vignette entiere illisible ne montre rien. */
.demo-apercu{
  position:relative;overflow:hidden;
  border-radius:12px;border:1px solid var(--ligne);
  background:var(--fond-1);
  aspect-ratio:16/9;
}
.demo-apercu img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
}

@media (min-width:820px){
  .demos-grille{grid-template-columns:1fr 1fr;gap:22px;}
  .demo-carte{padding:28px;}
}

/* ==========================================================================
   Le cadre de demonstration
   --------------------------------------------------------------------------
   Une iframe par-dessus la page. Le voile derriere ferme au clic, Echap
   ferme aussi, et le defilement de la page est bloque pendant ce temps :
   sans ca, le doigt qui fait defiler la demo fait defiler la page derriere.
   ========================================================================== */

html.modale-ouverte,html.modale-ouverte body{overflow:hidden;}

.demo-modale{position:fixed;inset:0;z-index:90;display:flex;}
.demo-modale[hidden]{display:none;}

.demo-voile{position:absolute;inset:0;background:var(--voile-barre);backdrop-filter:blur(3px);}

.demo-boite{
  position:relative;margin:auto;
  display:flex;flex-direction:column;
  width:min(1180px,96vw);height:min(94vh,980px);
  background:var(--fond-1);
  border:1px solid var(--ligne);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.demo-barre{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;
  border-bottom:1px solid var(--ligne);
  background:var(--fond-1);
}
.demo-titre{font-weight:800;color:var(--texte-0);font-size:1rem;}

.demo-vues{
  display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:var(--fond-2);border:1px solid var(--ligne);
}
.demo-vues[hidden]{display:none;}
.demo-vue{
  padding:6px 14px;border:0;border-radius:999px;
  background:transparent;color:var(--texte-3);
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;line-height:1;
}
.demo-vue.actif{background:var(--voile-orange);color:var(--orange-vif);}
.demo-vue:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

/* Poussees au bout de la barre, quel que soit le sens de lecture. */
.demo-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px;}
.demo-plein{color:var(--orange-vif);font-weight:700;font-size:.85rem;text-decoration:none;}
.demo-plein:hover{text-decoration:underline;}
.demo-fermer{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--fond-2);border:1px solid var(--ligne);
  color:var(--texte-2);cursor:pointer;
}
.demo-fermer:hover{border-color:var(--orange);color:var(--orange-vif);}

/* La scene : c'est elle qui donne sa largeur a l'iframe. */
.demo-scene{flex:1;min-height:0;display:flex;background:var(--fond-0);}
.demo-cadre{border:0;background:var(--fond-0);display:block;}

.scene-plein .demo-cadre,.scene-pc .demo-cadre{width:100%;height:100%;}

/* Vue telephone : 390 px, la largeur d'un ecran courant. Le cadre est dessine
   autour, avec le meme rayon qu'un telephone, pour que le commercant voie
   bien qu'il regarde ce que voit sa cliente. */
.scene-tel{align-items:center;justify-content:center;padding:18px;overflow:auto;}
.scene-tel .demo-cadre{
  width:390px;height:100%;max-height:780px;
  border-radius:26px;
  border:8px solid var(--fond-2);
  box-shadow:var(--ombre-image);
}

.demo-pied{
  margin:0;padding:9px 16px;
  border-top:1px solid var(--ligne);
  background:var(--fond-1);
  color:var(--texte-4);font-size:.76rem;text-align:center;
}

/* Sur un telephone, le cadre prend tout l'ecran : les coins arrondis et les
   marges ne feraient que voler de la hauteur a la demonstration. */
@media (max-width:860px){
  .demo-boite{width:100vw;height:100vh;border:0;border-radius:0;}
}

/* ==========================================================================
   Les formules
   ========================================================================== */

.formules{display:grid;gap:18px;margin-top:28px;align-items:start;}

.formule{
  display:flex;flex-direction:column;gap:14px;
  padding:26px 22px;border-radius:18px;
  background:var(--fond-2);
  border:1px solid var(--ligne);
  box-shadow:var(--ombre-douce);
}

/* LA FORMULE MISE EN AVANT N'EST PAS PLUS GRANDE, ELLE EST PLUS NETTE.
   Une carte agrandie casse l'alignement des trois prix, et c'est justement
   ces trois nombres que le prospect compare. Elle porte donc un liseré
   d'accent et une etiquette, a taille egale. */
.formule-phare{border-color:var(--orange);box-shadow:var(--shadow-accent);}

.formule-etiquette{
  align-self:flex-start;
  padding:5px 12px;border-radius:999px;
  background:var(--voile-orange);color:var(--orange-vif);
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}

.formule h3{margin:0;font-size:1.16rem;color:var(--texte-0);}
.formule-pour{margin:0;color:var(--texte-3);font-size:.88rem;}

.formule-prix{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
/* Le prix porte dir="ltr" dans le HTML : « 5 900 » contient une espace, donc
   l'algorithme bidirectionnel y voit deux nombres et les inverse en contexte
   arabe — « 5 900 DA » s'affichait « DA 900 5 ». Forcer le sens regle l'ordre
   des chiffres ; il faut ensuite ramener le bloc au bord de lecture de la
   carte, que dir="ltr" a fait basculer a gauche. */
[dir="rtl"] .formule-prix{justify-content:flex-end;}
.formule-montant{font-size:2rem;font-weight:800;color:var(--texte-0);line-height:1;}
.formule-devise{color:var(--texte-3);font-weight:700;font-size:.95rem;}

.formule-liste{list-style:none;padding:0;margin:0;display:grid;gap:9px;}
.formule-liste li{
  position:relative;padding-inline-start:26px;
  color:var(--texte-2);font-size:.92rem;line-height:1.5;
}
/* La coche est verte : c'est un code que tout le monde lit de la meme facon,
   et elle doit se distinguer de l'accent de marque, qui sert aux actions. */
.formule-liste li::before{
  content:"\2713";
  position:absolute;inset-inline-start:0;inset-block-start:0;
  color:var(--vert);font-weight:800;font-variant-emoji:text;
}
.formule-liste li.sans::before{content:"\2013";color:var(--texte-4);}
.formule-liste li.sans{color:var(--texte-4);}

.formule .btn{margin-top:auto;}

@media (min-width:880px){
  .formules{grid-template-columns:repeat(3,1fr);gap:20px;}
  /* Deux offres seulement : trois colonnes laisseraient un vide a droite, et
     un vide a droite d'une grille tarifaire se lit comme une offre manquante.
     La grille est aussi bornee en largeur — deux cartes etalees sur 1120 px
     donnent des lignes de texte de 90 caracteres, illisibles. */
  .formules-deux{grid-template-columns:repeat(2,1fr);max-width:780px;margin-inline:auto;}
}

/* Le lien de commande, sous le bouton qui ouvre le modele. Il est volontairement
   discret : l'ordre compte, on veut que le prospect regarde avant de cocher. */
.lien-commander{
  display:block;text-align:center;
  margin-top:-4px;padding:4px 0;
  color:var(--texte-3);font-size:.88rem;font-weight:600;text-decoration:none;
}
.lien-commander:hover{color:var(--orange-vif);text-decoration:underline;}

/* Le suivi mensuel : une note, pas une quatrieme formule. Un encadre plein
   l'aurait mis au meme rang que les trois autres, et il est facultatif. */
.maj-carte{
  margin-top:22px;padding:20px 22px;border-radius:14px;
  border:1px dashed var(--ligne);
  background:var(--voile-accent-tres-doux);
}
.maj-carte h3{margin:0 0 6px;font-size:1.02rem;color:var(--texte-0);}
.maj-carte p{margin:0;color:var(--texte-3);font-size:.9rem;}
.maj-prix{color:var(--orange-vif);font-weight:800;}

/* ==========================================================================
   Ce qui est livre — neuf cartes courtes
   ========================================================================== */

.inclus{display:grid;gap:14px;margin-top:28px;}
.inclus-item{
  padding:18px;border-radius:14px;
  background:var(--fond-2);border:1px solid var(--ligne);
}
.inclus-item h3{
  margin:0 0 6px;font-size:.99rem;color:var(--texte-0);
  display:flex;align-items:center;gap:9px;
}
.inclus-item h3 svg{width:18px;height:18px;color:var(--orange-vif);flex-shrink:0;}
.inclus-item p{margin:0;color:var(--texte-3);font-size:.89rem;line-height:1.55;}

@media (min-width:700px){ .inclus{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .inclus{grid-template-columns:repeat(3,1fr);} }

/* ==========================================================================
   Le formulaire — deux colonnes sur grand ecran
   ========================================================================== */

.demande-grille{display:grid;gap:22px;}
@media (min-width:900px){
  .demande-grille{grid-template-columns:1.05fr .95fr;gap:36px;align-items:start;}
  /* Le formulaire fait deux ecrans de haut. Sans ce collage, le rappel
     WhatsApp reste en haut de sa colonne et disparait des qu'on commence a
     remplir — or c'est precisement au milieu du formulaire que quelqu'un se
     dit qu'un message serait plus rapide. */
  .wa-bloc{position:sticky;top:92px;}
}

.zone-texte{
  width:100%;padding:13px 15px;border-radius:10px;
  background:var(--fond-2);border:1px solid var(--ligne);
  color:var(--texte-1);font:inherit;font-size:1rem;
  resize:vertical;min-height:96px;
}
.zone-texte:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent;}
.zone-texte::placeholder{color:var(--texte-champ);}

.form-erreur{color:var(--alerte);font-size:.9rem;margin:10px 0 0;min-height:1.2em;}

/* Le rappel WhatsApp a cote du formulaire. Il ne remplace pas le formulaire :
   certains prospects n'ecrivent jamais dans un champ, d'autres n'ouvrent
   jamais WhatsApp avec un inconnu. Les deux chemins restent ouverts. */
.wa-bloc{
  padding:22px;border-radius:16px;
  background:var(--voile-whatsapp);
  border:1px solid var(--voile-whatsapp-fort);
}
.wa-bloc h3{margin:0 0 8px;color:var(--texte-0);font-size:1.05rem;}
.wa-bloc p{margin:0 0 16px;color:var(--texte-2);font-size:.92rem;}
.btn-wa{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:999px;
  background:var(--whatsapp);color:var(--sur-whatsapp);
  font-weight:800;text-decoration:none;
}
.btn-wa svg{width:19px;height:19px;}
.btn-wa:hover{filter:brightness(1.06);}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.pied-liens{
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;
  padding:0;margin:0 0 14px;list-style:none;
}
.pied-liens a{color:var(--texte-2);font-size:.9rem;text-decoration:none;}
.pied-liens a:hover{color:var(--orange-vif);}

/* ==========================================================================
   Les croquis d'interface
   --------------------------------------------------------------------------
   Des SVG, pas des captures d'ecran, et c'est un choix.

   Une capture vieillit : le jour ou le dashboard change, elle montre un
   produit qui n'existe plus, et personne ne pense a la refaire. Elle pese
   aussi une centaine de kilo-octets, et elle ne suit pas le theme — une
   capture sombre sur une page en theme clair se lit comme un trou noir.

   Ces croquis, eux, sont peints avec les jetons de la page : ils basculent
   avec elle, ils ne pesent rien, et ils ne pretendent pas etre l'outil. Le
   vrai est a un clic, dans le cadre.
   ========================================================================== */

.croquis{display:block;width:100%;height:auto;}
.croquis-hero{
  border-radius:16px;
  box-shadow:var(--ombre-image);
  border:1px solid var(--ligne);
  max-width:min(520px,92vw);
  margin-inline:auto;
}

.croquis .c-fond{fill:var(--fond-0);}
.croquis .c-barre{fill:var(--fond-1);}
.croquis .c-ligne{fill:var(--ligne);}
.croquis .c-carte{fill:var(--fond-2);stroke:var(--ligne);stroke-width:1;}
.croquis .c-carte-on{stroke:var(--orange);}

/* Les blocs de texte. Deux niveaux seulement : un trait pale pour du libelle,
   un bloc plus dense pour un chiffre. Trois niveaux donnaient une bouillie a
   cette taille. */
.croquis .c-trait{fill:var(--texte-3);opacity:.32;}
.croquis .c-nombre{fill:var(--texte-2);opacity:.55;}
.croquis .c-nombre-on{fill:var(--orange);}

.croquis .c-puce{fill:var(--texte-3);opacity:.18;}
.croquis .c-puce-on{fill:var(--voile-accent-fort);}
.croquis .c-accent{fill:var(--orange);}
.croquis .c-bouton{fill:var(--orange);}

/* Les barres du graphique. Une seule est accentuee : c'est ce que fait le
   vrai dashboard, qui met en clair la barre la plus chargee. */
.croquis .c-bar{fill:var(--texte-3);opacity:.24;}
.croquis .c-bar-on{fill:var(--orange);}

.croquis .c-image{fill:var(--fond-1);stroke:var(--ligne);stroke-width:1;}
.croquis .c-image-tache{fill:var(--texte-3);opacity:.16;}