/* ══════════════════════════════════════════════════════════════
   أنس الهواجي — دائرة جليز النخيل، مراكش

   Version claire. Le fond nacre et le grenat #9B1746 sont relevés
   au pixel sur l'affiche de campagne ; le rose-doux ne sert qu'au
   décor (fonds de pastille, filets) : à 2,1:1 sur la nacre il ne
   tient pas comme couleur de texte. Bilingue ar/fr, RTL par défaut.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* fonds */
  --nacre:        #F4EBEE;   /* papier blush — fond de page          */
  --nacre-clair:  #FFFFFF;   /* surfaces posées : les cartes         */

  /* encres — contrastes mesurés sur la nacre */
  --encre:        #1E1116;   /* texte principal            15.3:1    */
  --encre-2:      #75525E;   /* texte secondaire            5.6:1    */
  --encre-3:      #815B69;   /* mentions de pied            4.8:1    */

  /* accents */
  --grenat:       #9B1746;   /* le grenat du parti          6.7:1    */
  --grenat-vif:   #C42A63;   /* survols, filets             4.5:1    */
  --rose-doux:    #E28AAE;   /* décor seulement — jamais du texte    */
  --filet:        #E6D5DB;   /* traits fins                          */

  --mesure: 26rem;
  --rayon: 7px;
  --ar-plus: 1.06;           /* rehausse propre à l'arabe          */
  /* texte courant : une famille par langue, le document choisit */
  --police-ar: 'Alexandria', 'Segoe UI', system-ui, sans-serif;
  --police-fr: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --police:    var(--police-ar);
}

/* à corps égal l'arabe paraît plus petit que le latin : on le
   rehausse d'un cran, sur le texte courant uniquement */
html[lang="fr"]{ --police: var(--police-fr); --ar-plus: 1; }
html[lang="ar"]{ --ar-plus: 1.06; }

/* ── remise à zéro ─────────────────────────────────────────── */
*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:clamp(28px, 7vh, 60px) 20px 56px;
  background:var(--nacre);
  color:var(--encre);
  font-family:var(--police);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── le fond ────────────────────────────────────────────────
   Pas de halo centré : l'affiche pose des rubans diagonaux en
   coin sur un aplat blush, et c'est ce geste-là qui est repris.
   Les rubans sont cotés en pixels, pas en pourcentages — sinon
   ils s'étalent en un lavis uniforme dès que la fenêtre s'élargit
   et le coin disparaît. Ils partent du coin haut-droit : le coin
   haut-gauche porte la bascule de langue et doit rester net.
   Tout est fixe, sans background-attachment (saccadé sur iOS).
   ───────────────────────────────────────────────────────────── */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    /* 1 · les trois rubans, de plus en plus légers */
    linear-gradient(214deg,
      rgba(155,23,70,.20)  0     15px,
      rgba(155,23,70,0)    15px  33px,
      rgba(155,23,70,.12)  33px  44px,
      rgba(155,23,70,0)    44px  68px,
      rgba(155,23,70,.06)  68px  74px,
      rgba(155,23,70,0)    74px),
    /* 2 · contre-jour rose, calé au coin bas-gauche */
    radial-gradient(660px 460px at 0% 100%,
      rgba(226,138,174,.26), rgba(226,138,174,0) 72%),
    /* 3 · le papier : à peine plus dense vers le bas */
    linear-gradient(180deg, #FAF4F6 0%, #F4EBEE 50%, #F0E3E8 100%);
}

/* grain d'impression — désaturé et en multiply, sinon il éclaircit
   le fond clair au lieu de le texturer */
.grain{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.page{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--mesure);
  transition:opacity .18s ease;
}

/* ── bilingue : on n'affiche que la langue du document ─────── */
html[lang="ar"] .i18n[lang="fr"],
html[lang="fr"] .i18n[lang="ar"]{ display:none; }

/* l'arabe ne supporte pas l'interlettrage : il casse les liaisons */
html[lang="ar"] .place,
html[lang="ar"] .devise,
html[lang="ar"] .footer__ligne{ letter-spacing:normal; text-transform:none; }

body.is-switching .page{ opacity:.3; }

/* ── bascule de langue : ancrée au coin, elle ne bouge plus ── */
.lang{
  position:fixed;
  z-index:3;
  /* position physique : elle reste à gauche en arabe comme en français */
  top:max(clamp(14px, 3vh, 26px), env(safe-area-inset-top));
  left:clamp(16px, 4vw, 28px);
  display:flex;
}

.lang__group{
  /* ordre figé : ع puis FR, quelle que soit la direction du document */
  direction:ltr;
  display:inline-flex;
  gap:2px;
  padding:3px;
  border:1px solid var(--filet);
  border-radius:100px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 6px 20px -12px rgba(30,17,22,.35);
}

.lang__btn{
  appearance:none;
  border:0;
  padding:6px 15px;
  border-radius:100px;
  background:transparent;
  color:var(--encre-2);
  font-family:var(--police);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.4;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}

.lang__btn:hover{ color:var(--encre); }

.lang__btn[aria-pressed="true"]{
  background:var(--grenat);
  color:#FFF4F7;
}

/* ── marque du parti, en tête de page ──────────────────────── */
.masthead{
  display:block;
  width:70px;
  height:auto;
  margin:0 auto 16px;
}

/* ── devise de campagne ────────────────────────────────────── */
.devise{
  margin:0 0 30px;
  text-align:center;
  font-family:var(--police);
  font-size:calc(1.12rem * var(--ar-plus));
  font-weight:500;
  line-height:1.8;
  color:var(--grenat);
}

html[lang="fr"] .devise{
  font-family:var(--police-fr);
  font-size:1.12rem;
  font-weight:600;
  letter-spacing:.01em;
}

.devise__sub{
  display:block;
  margin-top:2px;
  font-family:var(--police);
  font-style:normal;
  font-size:calc(.82rem * var(--ar-plus));
  font-weight:400;
  letter-spacing:.02em;
  color:var(--encre-2);
}

html[lang="fr"] .devise__sub{
  letter-spacing:.15em;
  text-transform:uppercase;
  font-size:.8rem;
  font-weight:500;
}

/* ── identité ──────────────────────────────────────────────── */
.identity{
  position:relative;
  isolation:isolate;
  text-align:center;
}

.avatar{
  position:relative;
  width:112px;
  height:112px;
  margin:0 auto 20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#EDDFE4;
  box-shadow:
    0 0 0 1px rgba(155,23,70,.34),
    0 0 0 6px rgba(226,138,174,.22),
    0 18px 38px -24px rgba(30,17,22,.7);
}

.avatar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.avatar__mark{
  font-family:'Aref Ruqaa', serif;
  font-size:30px;
  color:var(--grenat);
}

.name{
  margin:0;
  font-family:'Aref Ruqaa', serif;
  font-weight:700;
  font-size:clamp(2.45rem, 10.5vw, 3.3rem);
  line-height:1.42;
  color:var(--encre);
  text-wrap:balance;
}

html[lang="fr"] .name{
  font-family:var(--police-fr);
  font-weight:700;
  font-size:clamp(1.85rem, 7.4vw, 2.45rem);
  line-height:1.22;
  letter-spacing:-.022em;
}

/* le paraphe repris de l'affiche */
.swash{
  display:block;
  width:min(212px, 62%);
  height:20px;
  margin:2px auto 0;
  fill:var(--grenat);
}

.translit{
  direction:ltr;
  margin:14px 0 0;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--grenat);
}

html[lang="fr"] .translit{ display:none; }

.role{ margin:20px 0 0; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 15px;
  border:1px solid rgba(155,23,70,.28);
  border-radius:100px;
  background:rgba(226,138,174,.20);
  font-size:calc(.95rem * var(--ar-plus));
  font-weight:600;
  line-height:1.55;
  color:var(--grenat);
}

.place{
  margin:13px 0 0;
  font-size:calc(.93rem * var(--ar-plus));
  line-height:1.7;
  color:var(--encre-2);
}

.social{
  /* ordre imposé, identique dans les deux langues :
     facebook · instagram · youtube, toujours de gauche à droite */
  direction:ltr;
  display:flex;
  justify-content:center;
  gap:11px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}

.social a{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--filet);
  border-radius:50%;
  background:var(--nacre-clair);
  color:var(--encre-2);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}

.social a:hover{
  color:var(--grenat);
  border-color:rgba(155,23,70,.45);
  background:rgba(226,138,174,.20);
}

.social svg{ width:19px; height:19px; }

/* ── filet de séparation : le trait de l'affiche, qui s'épaissit
      en son milieu ───────────────────────────────────────────── */
.beam{
  display:flex;
  align-items:center;
  gap:14px;
  margin-block:34px;
}

.beam::before,
.beam::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(155,23,70,.35), transparent);
}

.beam span{
  flex:none;
  width:26px;
  height:3px;
  border-radius:2px;
  background:var(--grenat);
}

/* ── les trois accès ───────────────────────────────────────── */
.links{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.card{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:15px;
  width:100%;
  margin:0;
  padding:17px 19px;
  border:1px solid var(--filet);
  border-radius:var(--rayon);
  background:var(--nacre-clair);
  color:var(--encre);
  font-family:var(--police);
  text-align:start;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(30,17,22,.04);
  transition:border-color .25s ease, box-shadow .25s ease;
}

.card:hover{
  border-color:rgba(155,23,70,.38);
  box-shadow:0 10px 24px -18px rgba(155,23,70,.65);
}

/* repère grenat : un cran au repos, toute la hauteur au survol */
.card::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:2px;
  background:var(--grenat);
  transform:scaleY(.28);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}

.card:hover::before,
.card:focus-visible::before{ transform:scaleY(1); }

.card__icon{
  width:21px;
  height:21px;
  flex:none;
  color:var(--grenat);
  opacity:.85;
  transition:opacity .25s ease;
}

.card:hover .card__icon{ opacity:1; }

.card__txt{ flex:1; min-width:0; }

.card__title{
  display:block;
  font-size:calc(1.06rem * var(--ar-plus));
  font-weight:600;
  line-height:1.55;
}

.card__sub{
  display:block;
  margin-top:5px;
  font-size:calc(.89rem * var(--ar-plus));
  font-weight:400;
  line-height:1.65;
  color:var(--encre-2);
}

/* ── carte à deux accès : un titre, deux actions ────────────
   Le conteneur n'est plus un lien : ce sont les deux pastilles
   qui le sont. D'où le curseur neutre et le repère grenat piloté
   par :focus-within plutôt que par le survol seul. ─────────── */
.card--duo{
  align-items:flex-start;
  cursor:default;
}

.card--duo .card__icon{ margin-block-start:3px; }

.card--duo:hover{
  border-color:var(--filet);
  box-shadow:0 1px 2px rgba(30,17,22,.04);
}

.card--duo:hover::before{ transform:scaleY(.28); }
.card--duo:focus-within::before{ transform:scaleY(1); }

.card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:14px;
}

.action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 15px;
  border:1px solid rgba(155,23,70,.30);
  border-radius:100px;
  background:rgba(226,138,174,.20);
  color:var(--grenat);
  font-size:calc(.88rem * var(--ar-plus));
  font-weight:600;
  line-height:1.45;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.action:hover{
  border-color:var(--grenat);
  background:var(--grenat);
  color:#FFF4F7;
}

.action svg{
  width:16px;
  height:16px;
  flex:none;
  color:var(--grenat);
  transition:color .2s ease;
}

.action:hover svg{ color:#FFF4F7; }

/* ── pied : la signature du parti, discrète ────────────────── */
footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  margin-top:30px;
  text-align:center;
}

.footer__logo{
  width:58px;
  height:auto;
  opacity:.55;
  transition:opacity .25s ease;
}

footer:hover .footer__logo{ opacity:.85; }

.footer__ligne{
  font-size:calc(.78rem * var(--ar-plus));
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--encre-3);
}

/* ── accessibilité ─────────────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--grenat);
  outline-offset:3px;
  border-radius:4px;
}

:focus:not(:focus-visible){ outline:none; }

/* ── mise en place à l'ouverture ───────────────────────────── */
@keyframes surgir{
  from{ opacity:0; transform:translateY(13px); }
  to  { opacity:1; transform:none; }
}

/* .js-anim n'existe que le temps de l'animation d'entrée. Passé ce
   délai la classe est retirée : un élément masqué au chargement puis
   réaffiché (la translittération, cachée en français) retrouve alors
   son opacité normale au lieu de rester à zéro. */
.js-anim .reveal{
  opacity:0;
  animation:surgir .75s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(var(--d, 0) * 65ms);
}

@media (prefers-reduced-motion: reduce){
  .js-anim .reveal{ opacity:1; animation:none; }
  *, *::before, *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE
   La bascule est en position fixe : la colonne doit lui laisser
   la place en haut. Cibles tactiles à 44 px minimum.
   ══════════════════════════════════════════════════════════════ */

body{
  min-height:100svh;
  padding-block-end:max(56px, env(safe-area-inset-bottom));
}

.page{ padding-block-start:34px; }

.lang__btn{
  min-height:38px;
  padding:9px 17px;
}

.social a{ min-width:44px; min-height:44px; }

.card{ min-height:64px; }

@media (max-width: 400px){
  body{ padding-inline:16px; }
  .avatar{ width:98px; height:98px; }
  .masthead{ width:62px; margin-bottom:13px; }
  .devise{ margin-bottom:26px; }
  .card{ padding:15px 16px; gap:13px; }
  .card__sub{ font-size:calc(.85rem * var(--ar-plus)); }
}

/* écrans très courts : on resserre le vertical */
@media (max-height: 680px) and (min-width: 401px){
  body{ padding-block-start:24px; }
  .devise{ margin-bottom:22px; }
  .beam{ margin-block:26px; }
}


/* ══════════════════════════════════════════════════════════════
   BUREAU
   Au-delà de 900 px la colonne unique se scinde : l'identité à
   gauche, les trois accès à droite, séparés par le filet — qui
   bascule simplement à la verticale.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 900px){

  body{
    align-items:center;
    padding-block:64px;
  }

  .page{
    max-width:940px;
    padding-block-start:0;
    display:grid;
    grid-template-columns:1fr 1px 1fr;
    grid-template-areas:
      "marque marque marque"
      "devise devise devise"
      "ident  filet  liens"
      "bas    bas    bas"
      "pied   pied   pied";
    column-gap:clamp(40px, 6vw, 68px);
    align-items:start;
  }

  .masthead{ grid-area:marque; width:82px; margin-bottom:20px; }

  .devise{
    grid-area:devise;
    margin-bottom:46px;
    font-size:calc(1.22rem * var(--ar-plus));
  }

  html[lang="fr"] .devise{ font-size:1.24rem; }

  .identity{ grid-area:ident; }

  /* le filet devient vertical, et s'étire sur toute la hauteur */
  .identity + .beam{
    grid-area:filet;
    align-self:stretch;
    flex-direction:column;
    width:1px;
    margin:6px 0;
  }

  .identity + .beam::before,
  .identity + .beam::after{
    width:1px;
    height:auto;
    background:linear-gradient(180deg, transparent, rgba(155,23,70,.35), transparent);
  }

  .identity + .beam span{ width:3px; height:26px; }

  /* les cartes sont moins hautes que l'identité : on les recentre
     optiquement, sans align-items:center qui ferait sauter la
     colonne de gauche */
  .links{
    grid-area:liens;
    padding-block-start:54px;
  }

  .links + .beam{ grid-area:bas; margin-block:40px 0; }

  footer{ grid-area:pied; margin-top:26px; }

  .avatar{ width:124px; height:124px; }

  .name{ font-size:3.15rem; }

  html[lang="fr"] .name{ font-size:2.6rem; }

  .card{ padding:19px 21px; }

  .card__title{ font-size:calc(1.12rem * var(--ar-plus)); }

  /* la souris existe : le survol peut se permettre un vrai relief */
  .card:hover{
    border-color:rgba(155,23,70,.42);
    box-shadow:0 14px 30px -20px rgba(155,23,70,.55);
  }

  .card--duo:hover{
    border-color:var(--filet);
    box-shadow:0 1px 2px rgba(30,17,22,.04);
  }
}

@media (min-width: 1180px){
  .page{ max-width:1010px; }
  .name{ font-size:3.4rem; }
}