/* ==========================================================================
   izioptic — couche de finition posée sur Elementor.
   Le site est en thème sombre uniquement : les jetons portent directement les
   valeurs sombres, il n'y a plus de bascule ni de variante claire.
   Elementor écrit ses couleurs en dur dans son propre CSS ; les règles
   ci-dessous les reprennent (d'où les !important) tout en laissant le contenu
   entièrement modifiable dans l'éditeur.
   ========================================================================== */

/* ---------- Jetons (thème sombre) ---------- */
:root {
  --izi-bg: oklch(17% 0.02 260);
  --izi-surface: oklch(21% 0.025 260);
  --izi-surface-muted: oklch(24% 0.025 260);
  --izi-text: oklch(93% 0.01 260);
  --izi-muted: oklch(68% 0.015 260);
  --izi-primary: oklch(70% 0.12 220);
  --izi-primary-soft: oklch(32% 0.06 220);
  /* Encre posée sur un aplat bleu : le bleu du thème sombre est clair (70%),
     il lui faut donc une encre presque noire. */
  --izi-on-primary: oklch(15% 0.02 260);
  --izi-border: oklch(30% 0.02 260);
  --izi-navy: oklch(13% 0.02 260);
  --izi-navy-text: oklch(72% 0.02 260);

  --izi-shadow-sm: 0 4px 12px oklch(0% 0 0 / 0.35);
  --izi-shadow-md: 0 8px 24px oklch(0% 0 0 / 0.45);
  --izi-shadow-primary: 0 12px 28px oklch(70% 0.12 220 / 0.30);
  --izi-shadow-btn: 0 10px 24px oklch(70% 0.12 220 / 0.28);
  --izi-shadow-btn-strong: 0 12px 28px oklch(70% 0.12 220 / 0.36);

  /* Gouttière entre les cartes. */
  --izi-gutter: 14px;
}

/* ---------- Fond et textes ---------- */
body { background: var(--izi-bg) !important; color: var(--izi-text); }

/* Défilement doux vers les ancres, en réservant la hauteur de l'en-tête
   collant : sans cette marge, le titre visé se retrouve caché dessous. */
html { scroll-behavior: smooth; }
#fonctionnalites,
#fonctionnement,
#tarifs { scroll-margin-top: 112px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Mot mis en avant dans un titre (« magasin d'optique » du hero). */
.izi-accent { color: var(--izi-primary) !important; }

/* Chapeau de section : la ligne est bornée puis recentrée, sinon elle court
   sur toute la largeur du conteneur et devient pénible à lire. */
.izi-lede p {
  max-width: 60ch;
  margin-inline: auto;
}

/* Surfaces : Elementor pose « background-color:#FFFFFF » en dur.
   Pour une colonne, la boîte visible est .elementor-widget-wrap. */
.izi-card { background-color: transparent !important; }

/* ---------- Cartes : gouttière, ombre et survol ----------
   La gouttière passe par la colonne : le rembourrage interne de la carte est
   posé sur .elementor-widget-wrap et écrase celui qu'Elementor utilise
   normalement pour espacer les colonnes — sans cela, les cartes se touchent. */
.izi-card { padding: var(--izi-gutter) !important; }
.izi-card > .elementor-widget-wrap {
  height: 100%;
  box-shadow: var(--izi-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}

/* Cartes « fonctionnalité » seulement : pictogramme et titre sur une ligne,
   description en dessous. Cadré sur .izi-feature, sinon la règle déborderait
   sur les cartes d'offre, dont les éléments doivent rester empilés. */
.izi-feature > .elementor-widget-wrap { align-items: center; }
.izi-feature .elementor-widget-html {
  width: auto;
  /* Elementor espace ses widgets de 20px : sur une ligne, cette marge basse
     agrandit la boîte de l'icône et le centrage décale le titre de 10px.
     (La marge est rétablie en mobile, où icône et titre sont empilés.) */
  margin-bottom: 0 !important;
}
.izi-feature .elementor-widget-heading {
  width: auto;
  flex: 1;
  margin-bottom: 0 !important;
  /* Le centrage du conteneur flex ne suffisait pas (marges et hauteur de ligne
     décalaient le titre). On donne au titre la hauteur de la pastille et on y
     centre son texte : l'alignement ne dépend plus du contexte. */
  min-height: 46px;
  display: flex;
  align-items: center;
}
/* La marge vient du <h3> lui-même, pas du widget : sans cela le texte
   remonte de la moitié de cette marge et rate l'axe de la pastille. */
.izi-feature .elementor-heading-title { margin: 0 !important; }
.izi-feature .elementor-widget-text-editor { width: 100%; margin-top: 14px; }
.izi-card:hover > .elementor-widget-wrap {
  transform: translateY(-3px);
  box-shadow: var(--izi-shadow-md);
}

/* ---------- Pastille derrière les pictogrammes ---------- */
.izi-icon .elementor-icon,
.izi-ic {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--izi-primary-soft);
  color: var(--izi-primary);
}
.izi-ic svg { width: 23px; height: 23px; display: block; }

/* ---------- Logo (œil + nom) ---------- */
.izi-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--izi-text);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.03em;
  line-height: 1;
}
.izi-brand:hover { color: var(--izi-text); }
.izi-brand-dot {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--izi-primary);
  color: var(--izi-on-primary);
  flex: none;
}
.izi-brand-dot svg { width: 20px; height: 20px; display: block; stroke: var(--izi-on-primary); }
.izi-brand-on-dark, .izi-brand-on-dark:hover { color: #fff; font-size: 22px; }

/* ---------- Offre mise en avant ---------- */
.izi-plan-featured > .elementor-widget-wrap {
  box-shadow: var(--izi-shadow-primary);
  border-color: var(--izi-primary) !important;
  position: relative;
}
/* Le bandeau chevauche le bord haut de la carte, centré. */
.izi-badge {
  position: absolute !important;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  z-index: 2;
}
.izi-badge .elementor-heading-title { white-space: nowrap; }

/* ---------- Halo du hero ---------- */
.izi-hero { position: relative; overflow: hidden; }
.izi-hero::before {
  content: "";
  position: absolute;
  inset: -55% 0 auto;
  height: 640px;
  background: radial-gradient(60% 60% at 50% 0%, var(--izi-primary-soft), transparent 70%);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.izi-hero > .elementor-container { position: relative; z-index: 1; }

/* ---------- CTA final : bloc arrondi, à la largeur du site ----------
   .izi-cta est ici la COLONNE (pas la section) : le bloc navy reste donc
   contenu dans le conteneur au lieu de filer d'un bord à l'autre. */
.izi-cta > .elementor-widget-wrap {
  position: relative;
  overflow: hidden;
  background-color: var(--izi-navy) !important;
  border-radius: 24px;
}
.izi-cta > .elementor-widget-wrap::before {
  content: "";
  position: absolute;
  right: -8%; bottom: -60%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--izi-primary), transparent 65%);
  opacity: .3;
  pointer-events: none;
}
.izi-cta > .elementor-widget-wrap > * { position: relative; z-index: 1; }

/* ---------- Boutons des offres ----------
   .elementor-widget-wrap est un flex en ligne avec retour : « margin-top:auto »
   n'y pousse rien vers le bas. En passant la carte en colonne, le bouton se
   cale enfin au pied, à la même hauteur d'une offre à l'autre. */
.izi-plan > .elementor-widget-wrap {
  flex-direction: column;
  align-items: stretch;
}
.izi-plan .elementor-widget-button { margin-top: auto; }
.izi-plan .elementor-button { display: flex; width: 100%; justify-content: center; }

/* ---------- Encre et halo sur aplat bleu ---------- */
.izi-on-blue .elementor-button,
.izi-on-blue .elementor-button:hover,
.izi-on-blue .elementor-button:focus,
.izi-on-blue .elementor-heading-title { color: var(--izi-on-primary) !important; }
.izi-on-blue .elementor-button svg { stroke: var(--izi-on-primary); }

.izi-on-blue .elementor-button {
  box-shadow: var(--izi-shadow-btn);
  transition: transform .12s ease, background-color .18s ease, box-shadow .18s ease;
}
.izi-on-blue .elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--izi-shadow-btn-strong);
}

/* ---------- Bouton fantôme (secondaire) ---------- */
.izi-btn-ghost .elementor-button {
  background-color: transparent !important;
  color: var(--izi-text) !important;
  border-color: var(--izi-border) !important;
  transition: transform .12s ease, background-color .18s ease;
}
.izi-btn-ghost .elementor-button:hover,
.izi-btn-ghost .elementor-button:focus {
  background-color: var(--izi-surface-muted) !important;
  color: var(--izi-text) !important;
  transform: translateY(-1px);
}

/* Dans les cartes d'offre, le bouton secondaire prend le bleu de la marque :
   il mène à l'essai gratuit, ce n'est pas une action de second plan. Le filet
   suffit à le distinguer de l'offre mise en avant, qui reste pleine. */
.izi-plan .izi-btn-ghost .elementor-button {
  color: var(--izi-primary) !important;
  border-color: var(--izi-primary) !important;
}
.izi-plan .izi-btn-ghost .elementor-button:hover,
.izi-plan .izi-btn-ghost .elementor-button:focus {
  background-color: var(--izi-primary) !important;
  color: var(--izi-on-primary) !important;
}

/* ---------- Bouton fantôme sur fond navy (CTA final) ----------
   Même principe que .izi-btn-ghost, mais posé sur le bloc sombre : l'encre
   est blanche et le filet, une trace de blanc translucide. */
.izi-btn-ghost-dark .elementor-button {
  background-color: transparent !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transition: transform .12s ease, background-color .18s ease;
}
.izi-btn-ghost-dark .elementor-button:hover,
.izi-btn-ghost-dark .elementor-button:focus {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---------- En-tête collant ---------- */
#masthead {
  position: sticky; top: 0; z-index: 99;
  background: var(--izi-surface);
  border-bottom: 1px solid var(--izi-border);
}
#masthead .izi-header { border-bottom: 0 !important; }
#masthead .elementor-container { align-items: center; }
#masthead .elementor-column > .elementor-widget-wrap { align-content: center; justify-content: center; }
#masthead .elementor-icon-list-items.elementor-inline-items {
  justify-content: center;
  align-items: center;
  margin: 0;
  /* L'écart passe par gap : sans cela, remettre les marges des items à zéro
     colle les entrées du menu les unes aux autres. */
  gap: 32px;
}
#masthead .elementor-icon-list-item { margin: 0; padding: 0; }
#masthead .elementor-icon-list-item:after { display: none; }
#masthead .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--izi-text) !important; }

/* ==========================================================================
   Frise des étapes
   Chaque colonne porte sa pastille ; le trait de liaison est tracé par la
   colonne elle-même, de sa pastille jusqu'à la suivante.
   ========================================================================== */
.izi-step { position: relative; }
/* L'aplat bleu est porté par le widget lui-même, pas par le titre à
   l'intérieur : c'est donc lui qu'on arrondit en pastille. */
.izi-step-badge {
  position: relative;
  z-index: 1;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  padding: 0 !important;
}
.izi-step-badge .elementor-heading-title { line-height: 1; }

/* Numéro et titre sur une même ligne, centrés ensemble ; description dessous.
   Le titre ne prend que sa largeur (pas de flex:1), sinon la paire s'étire sur
   toute la colonne et ne peut plus se centrer. */
.izi-step > .elementor-widget-wrap {
  align-items: center;
  justify-content: flex-start;
}
.izi-step .izi-step-badge { margin: 0 12px 0 0 !important; }
.izi-step .elementor-widget-heading:not(.izi-step-badge) {
  width: auto;
  flex: 0 1 auto;
  /* align-items:center tient compte des marges : une marge basse décalerait
     le titre vers le haut par rapport à la pastille. */
  margin-bottom: 0 !important;
}
.izi-step .elementor-heading-title { text-align: start; }
.izi-step .elementor-widget-text-editor {
  width: 100%;
  margin-top: 12px;
  /* Même bord d'attaque que le titre et la pastille. */
  text-align: start;
}

/* ==========================================================================
   Menu latéral mobile
   ========================================================================== */
/* Hello Elementor applique un fond et « padding: 8px 16px » à tout <button> :
   sans remise à zéro, le pictogramme est décalé et le fond réapparaît. */
.izi-burger,
.izi-drawer-close {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 !important;
  margin: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--izi-border);
  background: transparent !important;
  color: var(--izi-text) !important;
  cursor: pointer;
  line-height: 0;
}
.izi-burger:hover,
.izi-drawer-close:hover { background: var(--izi-surface-muted) !important; }
.izi-burger svg,
.izi-drawer-close svg { display: block; }

.izi-burger {
  position: absolute;
  top: 50%; right: 20px;
  transform: translateY(-50%);
  width: 44px; height: 44px;
}
.izi-burger svg { width: 22px; height: 22px; }

.izi-scrim {
  position: fixed;
  inset: 0;
  background: oklch(10% 0.02 260 / 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 998;
}

.izi-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(310px, 84vw);
  padding: 22px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--izi-surface);
  border-left: 1px solid var(--izi-border);
  box-shadow: -18px 0 40px oklch(0% 0 0 / 0.45);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
  overflow-y: auto;
  z-index: 999;
}
.izi-drawer-close {
  display: inline-flex;
  align-self: flex-end;
  width: 40px; height: 40px;
  margin-bottom: 10px;
  flex: none;
}
.izi-drawer-close svg { width: 20px; height: 20px; }

.izi-drawer-list { list-style: none; margin: 0; padding: 0; }
.izi-drawer-list a {
  display: block;
  padding: 13px 12px;
  border-radius: 10px;
  color: var(--izi-text);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
}
.izi-drawer-list a:hover { background: var(--izi-surface-muted); }

.izi-drawer-cta {
  margin-top: 18px;
  padding: 15px 20px;
  border-radius: 10px;
  text-align: center;
  background: var(--izi-primary);
  color: var(--izi-on-primary);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: var(--izi-shadow-btn);
}
.izi-drawer-cta:hover { color: var(--izi-on-primary); }

/* État ouvert. */
body.izi-drawer-open { overflow: hidden; }
body.izi-drawer-open .izi-scrim { opacity: 1; visibility: visible; }
body.izi-drawer-open .izi-drawer { transform: translateX(0); }

/* En dessous de 820px, le menu en ligne et le bouton cèdent la place
   au panneau latéral. */
@media (max-width: 820px) {
  .izi-burger { display: inline-flex; }
  #masthead .izi-nav-col,
  #masthead .izi-cta-col { display: none !important; }
  #masthead .elementor-container { position: relative; }
}

/* ==========================================================================
   Petits écrans : le hero est empilé, son texte se centre.
   ========================================================================== */
@media (max-width: 767px) {
  .izi-hero .elementor-heading-title,
  .izi-hero .elementor-widget-text-editor,
  .izi-hero .elementor-widget-text-editor p,
  .izi-hero .elementor-button-wrapper { text-align: center !important; }

  /* Les deux appels à l'action passent l'un sous l'autre, centrés et de même
     largeur : empilés, deux boutons de largeurs différentes se remarquent. */
  .izi-hero .elementor-widget-button { display: flex; justify-content: center; }
  .izi-hero .elementor-widget-button,
  .izi-cta .elementor-widget-button { width: 100%; }
  .izi-hero .elementor-button,
  .izi-cta .elementor-button {
    display: flex;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    justify-content: center;
  }

  /* Titre et description : bornés puis recentrés. */
  .izi-hero .elementor-widget-text-editor p {
    max-width: 44ch;
    margin-inline: auto;
  }

  /* La colonne de texte n'a plus besoin de sa marge de droite. */
  .izi-hero .elementor-column > .elementor-widget-wrap { padding-right: 0 !important; }

  /* CTA final : les deux boutons sont alignés à droite et à gauche pour se
     centrer en paire sur grand écran ; empilés, ils se centrent chacun. */
  .izi-cta .elementor-button-wrapper { text-align: center !important; }
  .izi-cta .elementor-widget-button { display: flex; justify-content: center; }

  /* Tout le contenu empilé se centre : cartes, étapes, offres. */
  .izi-feature .elementor-heading-title,
  .izi-feature .elementor-widget-text-editor p,
  .izi-plan .elementor-heading-title,
  .izi-plan .elementor-widget-text-editor p { text-align: center !important; }

  /* Pictogramme / numéro repassent au-dessus du titre et se centrent. */
  .izi-feature > .elementor-widget-wrap { justify-content: center; }
  .izi-feature .elementor-widget-html {
    width: 100% !important;
    display: flex;
    justify-content: center;
    margin: 10px 0 12px 0 !important;
  }
  .izi-feature .elementor-widget-heading {
    width: 100%;
    flex: none;
    /* Empilé, le titre n'a plus à s'aligner sur l'icône : on annule la boîte
       flex du bureau, qui le réduisait à son texte et le collait au bord. */
    display: block;
    min-height: 0;
  }

  /* Empilées, les étapes se suivent sans rupture : un filet les sépare.
     La dernière n'en porte pas, sinon il double la bordure de section. */
  .izi-step { padding-bottom: 22px !important; border-bottom: 1px solid var(--izi-border); }
  .izi-step:last-child { padding-bottom: 0 !important; border-bottom: 0; }

  /* Étapes : la pastille garde sa place à côté du titre, la paire est
     simplement centrée. Largeur fixée : « auto » la réduisait à la largeur
     du chiffre (8px) et la pastille devenait une lamelle. */
  .izi-step .izi-step-badge {
    width: 40px !important;
    flex: none;
    margin: 0 12px 0 0 !important;
  }
  [dir="rtl"] .izi-step .izi-step-badge { margin: 0 0 0 12px !important; }

  /* Le badge de l'offre reste centré sur la bordure haute. */
  .izi-plan .izi-badge { width: auto !important; }

  /* Listes des offres : centrées elles aussi. */
  .izi-plan .elementor-icon-list-items { display: inline-block; text-align: left; }
  .izi-plan .elementor-widget-icon-list { text-align: center; }
}

/* ---------- Confort de lecture ---------- */
@media (prefers-reduced-motion: reduce) {
  .izi-card > .elementor-widget-wrap,
  .izi-on-blue .elementor-button,
  .izi-btn-ghost .elementor-button { transition: none; }
}
:focus-visible { outline: 3px solid var(--izi-primary); outline-offset: 2px; }

/* ==========================================================================
   Arabe : sens de lecture inversé (RTL)
   TranslatePress pose dir="rtl" sur <html> pour l'arabe. Les quelques règles
   qui parlent en « gauche / droite » sont reprises ici en miroir ; le reste
   du style est symétrique et n'a rien à changer.
   ========================================================================== */
[dir="rtl"] .izi-burger { right: auto; left: 20px; }

[dir="rtl"] .izi-drawer {
  right: auto;
  left: 0;
  border-left: 0;
  border-right: 1px solid var(--izi-border);
  box-shadow: 18px 0 40px oklch(0% 0 0 / 0.45);
  transform: translateX(-100%);
}
[dir="rtl"] body.izi-drawer-open .izi-drawer { transform: translateX(0); }
[dir="rtl"] .izi-drawer-close { align-self: flex-start; }

/* Pictogramme / numéro : la marge passe de l'autre côté du titre. */
[dir="rtl"] .izi-step .izi-step-badge { margin: 0 0 0 12px !important; }
@media (min-width: 768px) {
  [dir="rtl"] .izi-feature .elementor-widget-html { margin: 0 0 0 14px !important; }
}

/* Halo du CTA : il suit le coin opposé. */
[dir="rtl"] .izi-cta > .elementor-widget-wrap::before { right: auto; left: -8%; }

/* Les textes alignés à gauche par Elementor se lisent à droite en arabe. */
[dir="rtl"] .izi-feature .elementor-heading-title,
[dir="rtl"] .izi-feature .elementor-widget-text-editor p,
[dir="rtl"] .izi-plan .elementor-heading-title,
[dir="rtl"] .izi-plan .elementor-widget-text-editor p,
[dir="rtl"] .izi-hero .elementor-heading-title,
[dir="rtl"] .izi-hero .elementor-widget-text-editor p { text-align: right; }

/* Pas de row-reverse ici : en RTL l'axe principal va déjà de droite à gauche,
   la coche se place donc d'elle-même à droite du texte. L'inverser la
   renvoyait à gauche. */
[dir="rtl"] .izi-plan .elementor-icon-list-items { text-align: right; }

/* Pied de page : intitulés de colonnes et listes alignés à droite. */
[dir="rtl"] #colophon .elementor-heading-title,
[dir="rtl"] #colophon .elementor-widget-text-editor p,
[dir="rtl"] #colophon .elementor-icon-list-text,
[dir="rtl"] #colophon .elementor-icon-list-items { text-align: right; }
/* Le bloc du bas garde sa lecture d'un bord à l'autre. */
[dir="rtl"] #colophon .elementor-column:first-child .elementor-widget-text-editor p { text-align: right; }
[dir="rtl"] #colophon .elementor-column:last-child .elementor-widget-text-editor p { text-align: left; }

/* Étapes : titres à droite comme le reste du texte arabe. */
[dir="rtl"] .izi-step .elementor-heading-title,
[dir="rtl"] .izi-step .elementor-widget-text-editor p { text-align: right; }

/* Alignement des boutons en arabe : gauche et droite s'échangent, sinon les
   boutons se collent au bord opposé au texte. */
[dir="rtl"] .elementor-widget-button.elementor-align-left { text-align: right; }
[dir="rtl"] .elementor-widget-button.elementor-align-right { text-align: left; }

/* ==========================================================================
   Sélecteur de langue (TranslatePress)
   Le bouton flottant est posé par le plugin en haut de page (position fixed,
   top:0) : il chevauchait le logo dans l'en-tête. On le renvoie dans le coin
   bas, du côté opposé au sens de lecture.
   ========================================================================== */
/* Le bouton flottant est désactivé : le sélecteur vit dans l'en-tête. */
.trp-floating-switcher { display: none !important; }

/* Sélecteur + bouton alignés sur une même ligne, poussés vers le bord
   extérieur de l'en-tête (droite en français, gauche en arabe). */
.izi-cta-col > .elementor-widget-wrap {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.izi-cta-col > .elementor-widget-wrap > .elementor-widget { width: auto; margin: 0; }

/* Aspect « bouton fantôme » : fond transparent + filet, comme « Voir les
   tarifs ». TranslatePress empile deux couches — une ancre inerte qui porte
   les dimensions et une surcouche interactive — d'où les deux habillages.
   La flèche du plugin est tracée avec var(--text), absent de ce thème : on
   la fait suivre la couleur courante. */
.izi-ls { --text: currentColor; }

.izi-ls .trp-shortcode-switcher__wrapper,
.izi-ls .trp-language-switcher,
.izi-ls .trp-current-language-item__wrapper {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.izi-ls .trp-language-item__current {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  color: var(--izi-text) !important;
  border: 1px solid var(--izi-border) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color .18s ease, transform .12s ease;
}
.izi-ls .trp-shortcode-overlay .trp-language-item__current:hover {
  background: var(--izi-surface-muted) !important;
  transform: translateY(-1px);
}
.izi-ls .trp-shortcode-arrow { width: 16px; height: 16px; flex: none; }
.izi-ls .trp-flag-image { width: 18px; height: auto; border-radius: 2px; }

/* Liste déroulante : même surface que les cartes. */
.izi-ls .trp-language-switcher ul,
.izi-ls .trp-ls-shortcode-language,
.izi-ls [class*="trp-ls-"][class*="list"] {
  background: var(--izi-surface) !important;
  border: 1px solid var(--izi-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--izi-shadow-md) !important;
  overflow: hidden;
}
.izi-ls .trp-language-item:not(.trp-language-item__current) {
  background: transparent !important;
  color: var(--izi-text) !important;
  padding: 10px 14px !important;
  font-size: 15px;
  text-decoration: none !important;
}
.izi-ls .trp-language-item:not(.trp-language-item__current):hover {
  background: var(--izi-surface-muted) !important;
}

/* Sélecteur de langue déplacé dans le panneau mobile. */
.izi-drawer-ls { margin-top: 16px; }
.izi-drawer-ls:empty { display: none; }
.izi-drawer-ls .trp-language-switcher > div { width: 100%; }

/* Libellés de l'en-tête : jamais coupés sur deux lignes. */
.izi-cta-col .elementor-button,
.izi-ls .trp-language-item-name { white-space: nowrap !important; }
.izi-ls .trp-language-item-name { overflow: visible !important; text-overflow: clip !important; max-width: none !important; }

/* Déclencheur du sélecteur : drapeau seul. Le nom de la langue reste affiché
   dans la liste déroulante, où il est nécessaire pour choisir. */
.izi-ls .trp-current-language-item__wrapper .trp-language-item-name { display: none !important; }
.izi-ls .trp-current-language-item__wrapper .trp-language-item__current {
  gap: 6px;
  padding: 0 12px !important;
  /* Même hauteur que le bouton voisin, bordures comprises : sans
     box-sizing, le filet ajoute 2px et l'alignement se décale. */
  box-sizing: border-box;
  min-height: 49px;
  justify-content: center;
}
.izi-ls .trp-current-language-item__wrapper .trp-flag-image { width: 22px; }

/* Sur tablette (md), la barre est trop étroite pour porter à la fois le menu,
   le bouton et le sélecteur : le bouton s'efface et ne revient qu'à partir de
   « lg ». En dessous de 821px, toute la colonne cède la place au panneau. */
@media (min-width: 821px) and (max-width: 991px) {
  .izi-cta-col .elementor-widget-button { display: none !important; }
  /* Le bouton libère sa place : le menu la reprend pour tenir sur une seule
     ligne, sinon « Tarifs » passe au-dessous et l'en-tête double de hauteur. */
  #masthead .izi-nav-col { width: 62% !important; }
  #masthead .izi-cta-col { width: 16% !important; }
  #masthead .elementor-icon-list-items.elementor-inline-items {
    gap: 20px;
    flex-wrap: nowrap;
  }
  #masthead .elementor-icon-list-text { white-space: nowrap; }
}

/* ==========================================================================
   Bascule de langue (bouton simple, sans liste déroulante)
   Deux langues publiées : un aller-retour direct suffit. Le bouton reprend
   l'aspect « fantôme » des boutons secondaires.
   ========================================================================== */
.izi-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 49px;
  padding: 0 14px;
  /* Filet bleu : sur le fond sombre de l'en-tete, le gris des bordures ne se
     voyait pas et le bouton ne se lisait plus comme un bouton. Le bleu en
     contour reste second face au bouton plein voisin. */
  border: 1px solid var(--izi-primary);
  border-radius: 10px;
  background: transparent;
  color: var(--izi-primary);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}
.izi-lang-toggle:hover,
.izi-lang-toggle:focus {
  background: var(--izi-primary);
  color: var(--izi-on-primary);
  transform: translateY(-1px);
}
.izi-lang-code {
  display: block;
  letter-spacing: .04em;
}

/* Dans l'en-tête, le code seul (AR / FR) ; le nom de la langue reste lu par
   les lecteurs d'écran via aria-label, et s'affiche dans le panneau mobile,
   assez large pour le porter. */
#masthead .izi-lang-toggle .izi-lang-name { display: none; }
.izi-drawer .izi-lang-toggle { width: 100%; }
.izi-drawer .izi-lang-toggle .izi-lang-code { display: none; }

/* Bloc de droite de l'en-tête : bascule puis bouton, l'ensemble poussé vers
   le bord extérieur. flex-end suit le sens de lecture, donc à droite en
   français et à gauche en arabe — le miroir attendu. */
#masthead .izi-cta-col > .elementor-widget-wrap {
  justify-content: flex-end;
  text-align: right;
}
[dir="rtl"] #masthead .izi-cta-col > .elementor-widget-wrap { text-align: left; }

/* ==========================================================================
   Respiration du texte arabe
   L'écriture arabe monte et descend plus que le latin : à interligne et
   marges identiques, les blocs paraissent collés. On desserre là où le
   contact se voit — sous les titres de cartes et d'étapes.
   ========================================================================== */
[dir="rtl"] .izi-feature .elementor-heading-title,
[dir="rtl"] .izi-step .elementor-heading-title,
[dir="rtl"] .izi-plan .elementor-heading-title { line-height: 1.6; }

[dir="rtl"] .izi-feature .elementor-widget-text-editor { margin-top: 20px; }
[dir="rtl"] .izi-step .elementor-widget-text-editor { margin-top: 16px; }
[dir="rtl"] .elementor-widget-text-editor p { line-height: 1.9; }
[dir="rtl"] .elementor-icon-list-item { line-height: 1.8; }

/* ==========================================================================
   Comparatif des offres
   Une matrice se lit en tableau ; sur petit écran elle défile horizontalement
   avec la colonne des intitulés figée, plutôt que d'être empilée en cartes
   où l'on perd la comparaison ligne à ligne.
   ========================================================================== */
.izi-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--izi-border);
  border-radius: 16px;
  background: var(--izi-surface);
}
.izi-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--izi-font-body, "Public Sans", system-ui, sans-serif);
  font-size: 15px;
}
.izi-table th,
.izi-table td {
  padding: 14px 18px;
  text-align: center;
  border-bottom: 1px solid var(--izi-border);
  vertical-align: middle;
}
.izi-table thead th {
  padding: 22px 18px;
  border-bottom: 1px solid var(--izi-border);
  background: var(--izi-surface-muted);
}
/* Intitulés de ligne : alignés au texte, et figés au défilement. */
.izi-table tbody th[scope="row"],
.izi-table thead th:first-child {
  text-align: start;
  position: sticky;
  inset-inline-start: 0;
  background: var(--izi-surface);
  z-index: 1;
  font-weight: 600;
  color: var(--izi-text);
}
.izi-table thead th:first-child { background: var(--izi-surface-muted); }

.izi-plan-name {
  display: block;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--izi-text);
}
.izi-plan-price {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--izi-muted);
}

/* Colonne mise en avant. */
.izi-table .izi-col-featured { background: color-mix(in oklab, var(--izi-primary) 8%, transparent); }
.izi-table thead th.izi-col-featured { background: color-mix(in oklab, var(--izi-primary) 14%, transparent); }

/* Titres de groupe. */
.izi-table .izi-group th {
  text-align: start;
  background: var(--izi-bg);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--izi-muted);
  position: static;
}

.izi-yes { width: 20px; height: 20px; color: var(--izi-success, #3FBF8A); }
.izi-no { color: var(--izi-border); font-size: 18px; }
.izi-val { color: var(--izi-text); }

/* Boutons de la dernière ligne. */
.izi-table-cta td { padding-top: 20px; padding-bottom: 24px; border-bottom: 0; }

.izi-tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  /* Filet bleu, comme les boutons secondaires des cartes d'offre : c'est le
     meme geste, il doit avoir la meme allure d'une page a l'autre. */
  border: 1px solid var(--izi-primary);
  border-radius: 10px;
  background: transparent;
  color: var(--izi-primary);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, transform .12s ease;
}
.izi-tbtn:hover { background: var(--izi-primary); color: var(--izi-on-primary); transform: translateY(-1px); }
.izi-tbtn-primary {
  background: var(--izi-primary);
  border-color: var(--izi-primary);
  color: var(--izi-on-primary);
  box-shadow: var(--izi-shadow-btn);
}
.izi-tbtn-primary:hover { background: #7CC7E6; color: var(--izi-on-primary); }

/* Repris du cœur de WordPress : masque le titre du tableau sans le retirer
   de l'arbre d'accessibilité. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .izi-table { font-size: 14px; }
  .izi-table th, .izi-table td { padding: 12px 14px; }
  .izi-plan-name { font-size: 16px; }
}

/* ==========================================================================
   En-tête des cartes d'offre
   Le nom de l'offre forme un bandeau en haut de la carte : marges négatives
   pour annuler le rembourrage de la carte (30px) et occuper toute sa largeur,
   arrondi calé sur celui de la carte.
   ========================================================================== */
.izi-plan .izi-plan-head {
  /* La largeur doit être calculée : avec une largeur explicite, des marges
     négatives déplacent la boîte sans l'élargir, et le bandeau restait en
     retrait. 100% = largeur de contenu de la carte, + 60px pour couvrir ses
     deux rembourrages de 30px. */
  width: calc(100% + 60px);
  margin: -30px -30px 22px !important;
  padding: 20px 24px;
  background: var(--izi-surface-muted);
  border-bottom: 1px solid var(--izi-border);
  border-radius: 15px 15px 0 0;
}
.izi-plan .izi-plan-head .elementor-heading-title { text-align: center; }

/* Prix et accroche suivent l'en-tête : centrés eux aussi. */
.izi-plan .izi-plan-head ~ .elementor-widget-heading .elementor-heading-title,
.izi-plan .izi-plan-head ~ .elementor-widget-text-editor p { text-align: center; }

/* La liste reste alignée au bord : une coche centrée se lit mal. */
.izi-plan .elementor-widget-icon-list { text-align: center; }
.izi-plan .elementor-icon-list-items { display: inline-block; text-align: start; }

/* L'offre mise en avant garde son bandeau à cheval sur la bordure haute. */
.izi-plan-featured .izi-plan-head { margin-top: -30px !important; }

/* Boutons du hero en grand écran : chacun occupe sa colonne (50%), donc les
   deux font la même largeur. En mobile ils sont déjà empilés et bornés. */
@media (min-width: 768px) {
  .izi-hero .elementor-inner-section .elementor-widget-button { width: 100%; }
  .izi-hero .elementor-inner-section .elementor-button {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* Ligne d'abonnement annuel sous le prix mensuel. */
.izi-plan .izi-save {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--izi-success, #3FBF8A) 18%, transparent);
  color: var(--izi-success, #3FBF8A);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.izi-plan .izi-save + br { display: none; }

/* Visuel du hero : image détourée, elle occupe sa colonne. */
.izi-hero-img { display: block; width: 100%; height: auto; }

/* Le visuel déplacé sous le titre garde une respiration et reste borné. */
@media (max-width: 767px) {
  .izi-hero .elementor-widget-html .izi-hero-img {
    max-width: 420px;
    margin: 6px auto 22px;
  }
}

/* Mentions d'essai gratuit. */
.izi-trial {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--izi-primary);
  background: transparent;
  color: var(--izi-primary);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
/* Ligne rassurante sous les boutons du hero. */
.izi-note { color: var(--izi-muted); }

/* ==========================================================================
   Bascule mensuel / annuel
   Les deux tarifs sont dans la page ; seul l'affichage change. Sans
   JavaScript, c'est le mensuel qui reste visible.
   ========================================================================== */
.izi-billing {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--izi-border);
  border-radius: 999px;
  background: var(--izi-surface);
}
.izi-billing-opt {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  /* Hello Elementor colore tout <button> (rose #cc3366) avec une règle qui
     l'emporte ici : d'où le !important sur les deux états. */
  background: transparent !important;
  color: var(--izi-muted) !important;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.izi-billing-opt:hover { color: var(--izi-text) !important; }
.izi-billing-opt.is-on {
  background: var(--izi-primary) !important;
  color: var(--izi-on-primary) !important;
}
.izi-billing-opt.is-on .izi-save {
  background: color-mix(in oklab, var(--izi-on-primary) 16%, transparent);
  color: var(--izi-on-primary);
}

/* Prix : montant + unité, une variante visible à la fois. */
.izi-price {
  font-family: "Manrope", system-ui, sans-serif;
  line-height: 1;
}
.izi-price-amount {
  font-size: 58px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--izi-text);
}
.izi-price-unit {
  margin-inline-start: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--izi-muted);
}
.izi-price-year { display: none; }
body.izi-annual .izi-price-month { display: none; }
body.izi-annual .izi-price-year { display: inline; }


/* --------------------------------------------------------------------------
   Bascule et prix dans la carte d'offre
   La bascule est posee au-dessus du tarif qu'elle commande ; a un tiers de
   la largeur, elle passe en version compacte pour tenir sans deborder.
   -------------------------------------------------------------------------- */
.izi-plan .elementor-widget-html { text-align: center; }

.izi-plan .izi-billing,
.izi-billing-spacer .izi-billing {
  gap: 2px;
  padding: 4px;
  max-width: 100%;
}
.izi-plan .izi-billing-opt,
.izi-billing-spacer .izi-billing-opt {
  padding: 8px 12px;
  font-size: 13px;
  gap: 6px;
}
.izi-plan .izi-billing .izi-save,
.izi-billing-spacer .izi-save {
  margin-inline-start: 0;
  padding: 2px 7px;
  font-size: 11px;
}

/* La doublure de l'offre sur devis occupe la place sans rien montrer. */
.izi-billing-spacer { visibility: hidden; }
.izi-billing-spacer .izi-billing { display: inline-flex; }
.izi-billing-spacer .izi-billing-opt { display: inline-flex; }

/* Le prix se lit au centre de la carte, sous la bascule. */
.izi-plan .izi-price { text-align: center; }

@media (max-width: 767px) {
  .izi-price-amount { font-size: 36px; }
  .izi-billing-opt { padding: 9px 14px; font-size: 14px; }
}

/* ==========================================================================
   FAQ
   <details> natif : le contenu est dans le HTML dès le premier rendu, ce que
   le balisage FAQPage exige, et le pliage n'a besoin d'aucun script.
   ========================================================================== */
.izi-faq { max-width: 820px; margin-inline: auto; }
.izi-faq-item {
  border: 1px solid var(--izi-border);
  border-radius: 14px;
  background: var(--izi-surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.izi-faq-item[open] { border-color: var(--izi-primary); }
.izi-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  color: var(--izi-text);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  list-style: none;
}
.izi-faq-q::-webkit-details-marker { display: none; }
/* Le chevron est dessiné en CSS : pas d'image, pas de police d'icônes. */
.izi-faq-q::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--izi-primary);
  border-bottom: 2px solid var(--izi-primary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.izi-faq-item[open] .izi-faq-q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.izi-faq-q:hover { color: var(--izi-primary); }
.izi-faq-a { padding: 0 22px 20px; }
.izi-faq-a p {
  margin: 0;
  color: var(--izi-muted);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) { .izi-faq-q::after { transition: none; } }

/* ==========================================================================
   Maillage interne : articles proches et raccourcis vers l'offre
   ========================================================================== */
.izi-related { margin-top: 52px; padding-top: 36px; border-top: 1px solid var(--izi-border); }
.izi-related-title {
  margin: 0 0 18px;
  color: var(--izi-text);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
}
.izi-related-list { margin: 0; padding: 0; list-style: none; }
.izi-related-list li { margin-bottom: 10px; }
.izi-related-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--izi-border);
  border-radius: 12px;
  text-decoration: none;
}
.izi-related-list a:hover { border-color: var(--izi-primary); }
.izi-related-item-title {
  color: var(--izi-text);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
}
.izi-related-item-meta { flex: none; color: var(--izi-muted); font-size: 13px; }

.izi-hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 40px;
}
.izi-hub-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--izi-border);
  border-radius: 14px;
  text-decoration: none;
}
.izi-hub-item:hover { border-color: var(--izi-primary); }
.izi-hub-title {
  color: var(--izi-primary);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.izi-hub-desc { color: var(--izi-muted); font-size: 14px; line-height: 1.5; }

@media (max-width: 767px) {
  .izi-hub { grid-template-columns: 1fr; }
  .izi-faq-q { font-size: 16px; padding: 16px 18px; }
  .izi-faq-a { padding: 0 18px 18px; }
}