/*  ═══════════════════════════════════════════════════════════════
    Écrans repris de la maquette « Mobile façon app ».
    Chaque page est une planche de la maquette, à l'identique :
    le cadre de 390 px devient la largeur de l'écran, rien d'autre
    ne change. Sur un grand écran, la planche reste centrée.
    ═══════════════════════════════════════════════════════════════ */
*{-webkit-tap-highlight-color:rgba(14,107,82,.12)}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#E9EAE6;
  font-family:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased;color:#0D1117}
a{color:#0E6B52;text-decoration:none}
button{font-family:inherit}
img{max-width:100%}

/* la planche */
.ecran{width:100%;max-width:560px;margin:0 auto;min-height:100svh;
  box-sizing:border-box;background:#F4F5F2;color:#0D1117;
  display:flex;flex-direction:column;position:relative;overflow:visible;
  box-shadow:0 0 0 1px rgba(13,17,23,.06)}
@media (min-width:561px){
  body{padding:0}
  .ecran{min-height:100svh}
}

/* la barre d'onglets reste au pouce */
.ecran > .onglets{position:sticky;bottom:0;z-index:20}

/* le sélecteur de langue, posé à la place du bouton « FR » */
.lang{position:relative;display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 10px;border:1px solid #DCDED8;background:#FFFFFF;
  border-radius:999px;font:600 11.5px/1 'Inter',sans-serif;letter-spacing:.04em;
  color:#5A6472;cursor:pointer}
.lang svg.chev{transition:transform .18s}
.lang[data-open="1"] svg.chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;
  display:none;flex-direction:column;min-width:156px;padding:6px;
  background:#FFFFFF;border:1px solid #E4E6E0;border-radius:14px;
  box-shadow:0 16px 34px rgba(13,17,23,.14)}
.lang[data-open="1"] .lang-menu{display:flex}
.lang-menu button{display:flex;align-items:center;gap:9px;padding:9px 10px;
  border:0;background:none;border-radius:10px;cursor:pointer;
  font:600 13px/1 'Inter',sans-serif;color:#0D1117;text-align:start}
.lang-menu button:hover{background:#F2F3EF}
.lang-menu button[aria-current="true"]{color:#0E6B52}
.lang-menu .fl{display:inline-flex;width:21px;height:15px;border-radius:3px;overflow:hidden;flex:0 0 21px}

html[dir="rtl"] .marque{direction:ltr;unicode-bidi:isolate}

/*  ═══════════════════════════════════════════════════════════════
    Version ordinateur. La planche cesse d'être un téléphone posé
    au milieu : elle s'étale, les grilles s'élargissent, un en-tête
    et un pied de page encadrent le tout. Rien de ceci n'existe
    en dessous de 900 px — le téléphone garde la maquette intacte.
    ═══════════════════════════════════════════════════════════════ */
.entete,.pied{display:none}

@media (min-width:900px){
  body{background:#F4F5F2}

  .entete{display:flex;align-items:center;gap:30px;max-width:1180px;
    margin:0 auto;padding:22px 40px 6px}
  .marque-pc{font-size:17px;font-weight:700;letter-spacing:-.022em;color:#0D1117}
  .marque-pc span{font-weight:500;color:#5A6472}
  .entete nav{display:flex;gap:26px;margin-inline-start:14px}
  .entete nav a{font-size:14px;font-weight:550;color:#414954}
  .entete nav a:hover{color:#0E6B52}
  .cta-pc{margin-inline-start:auto;display:inline-flex;align-items:center;
    height:42px;padding:0 20px;border-radius:999px;background:#0E6B52;
    color:#FFFFFF;font-size:14px;font-weight:650}

  /* la planche devient une page */
  .ecran{max-width:1180px;min-height:0;padding:10px 40px 64px;
    background:transparent;box-shadow:none}
  .ecran > .onglets{display:none!important}

  /* la barre de titre de la planche s'aligne sur l'en-tête */
  .ecran > div:first-child{padding-inline:0!important}

  /* les titres prennent l'espace */
  .ecran h1{font-size:46px!important;line-height:1.04!important;
    letter-spacing:-.034em!important;max-width:21ch}
  .ecran h1 + p,.ecran h1 ~ p:first-of-type{font-size:16.5px!important;max-width:58ch}

  /* deux colonnes deviennent quatre, une pile devient deux colonnes */
  .ecran [style*="repeat(2, minmax(0, 1fr))"]{
    grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .ecran [style*="repeat(3, minmax(0, 1fr))"]{
    grid-template-columns:repeat(3,minmax(0,1fr))!important}

  /* le bandeau photo s'étire */
  .ecran > .bandeau{height:320px!important;flex-basis:320px!important;
    border-radius:24px;overflow:hidden}
  .ecran > .bandeau + div{margin-top:-28px!important;
    border-radius:28px!important;padding-inline:36px!important}

  /* les cartes empilées se mettent côte à côte */
  .ecran .duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}

  /* le bouton d'action ne traverse plus l'écran */
  .ecran a[style*="height: 54px"],.ecran a[style*="height: 52px"],
  .ecran a[style*="min-height: 54px"]{max-width:340px}

  .pied{display:block;border-top:1px solid #E2E4DE;margin-top:40px}
  .pied-in{display:flex;gap:40px;max-width:1180px;margin:0 auto;padding:30px 40px 44px}
  .pied-in p{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:#5A6472}
  .pied nav{margin-inline-start:auto;display:flex;flex-direction:column;gap:9px}
  .pied nav a{font-size:13px;color:#414954}
  .pied nav a:hover{color:#0E6B52}
}

@media (min-width:900px){
  /* la barre d'action collée en bas de l'écran du téléphone
     redevient un simple bouton dans le flux de la page */
  .ecran > .barre-action{
    background:transparent!important;border-top:0!important;
    padding-inline:0!important;margin-top:24px!important}
  .ecran > div[style*="margin-top: auto"]{margin-top:28px!important}
  /* le bloc posé sous le bandeau photo s'aligne sur lui */
  .ecran > .bandeau + div{padding-inline:0!important;
    background:transparent!important}
}

@media (min-width:900px){
  /* Au doigt, ces séries se font glisser latéralement. À la souris
     on ne devine pas le geste : elles s'alignent côte à côte. */
  .ecran div:has(> .serie-carte){
    display:grid!important;grid-auto-flow:column!important;
    grid-auto-columns:1fr!important;gap:18px!important;
    padding-inline:0!important;overflow:visible!important}
  .ecran div:has(> .serie-carte) > *{
    flex:auto!important;width:auto!important;min-width:0!important}

  /* les pastilles de défilement n'ont plus d'objet */
  .ecran span[style*="width: 16px"][style*="height: 5px"],
  .ecran span[style*="height: 5px"][style*="border-radius: 999px"],
  .ecran div:has(> span[style*="height: 5px"]){display:none!important}

  /* la bande de pays du menu s'étale au lieu de défiler */
  .ecran [style*="grid-auto-flow: column"]{grid-auto-columns:1fr!important}
}

@media (min-width:900px){
  /* le bout de carte qui dépasse, pour signaler qu'on peut glisser,
     n'a plus de raison d'être quand tout tient à l'écran */
  .ecran .serie-bout{display:none!important}
}

/*  Les cartes sombres de la maquette ne fixaient pas la couleur du
    texte : il héritait de l'encre de la page et devenait noir sur
    noir. On leur rend un texte clair, à toutes les largeurs.  */
.ecran .bloc-sombre{color:#FFFFFF}