/* ─────────────────────────────────────────────────────────────────────────
   Navigation de téléphone — AidFacile

   L'en-tête à deux commandes, le menu plein écran, la recherche et la
   barre du bas. Rien ne se déclenche au-dessus de 760 pixels : sur
   ordinateur, la page est exactement celle d'avant.

   Deux précautions qui reviennent partout dans ce fichier :

   dvh plutôt que vh. Sur iPhone, vh compte la barre d'adresse comme si
   elle n'existait pas : un panneau en 100vh dépasse l'écran et son bas
   devient inatteignable. On écrit les deux, l'ancienne unité d'abord.

   env(safe-area-inset-bottom). Les modèles à encoche réservent une bande
   en bas pour la barre d'accueil du téléphone. Sans cette réserve, la
   barre de navigation se glisse dessous et ne se touche plus.
   ───────────────────────────────────────────────────────────────────────── */

/* Un panneau masqué doit disparaître, même si sa classe impose un mode
   d'affichage. Sans ces lignes, display:flex l'emporte sur hidden. */
.af-menu-plein[hidden],
.af-rech[hidden]{display:none!important}

/* Sur ordinateur, rien de tout ça n'existe. */
.af-menu-bouton,.af-loupe,.af-barre,.af-rech{display:none}

@media (max-width:760px){

  header{position:relative}
  .header-left{min-width:0}

  /* ==================================================================
     L'EN-TÊTE : deux commandes, rien d'autre
     ================================================================== */

  .af-menu-bouton,
  .af-loupe,
  header .header-search-toggle{
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;cursor:pointer;padding:0
  }

  .af-menu-bouton{
    width:44px;height:44px;
    border:1.5px solid #DCE5DE;border-radius:12px;background:#fff;
    color:#252F28
  }
  .af-menu-bouton svg{width:24px;height:24px;display:block}
  .af-menu-bouton:focus-visible{outline:3px solid #457857;outline-offset:2px}

  .af-loupe,
  header .header-search-toggle{
    width:42px;height:42px;margin-right:2px;
    border:none;background:none;color:#566060
  }
  .af-loupe svg,
  header .header-search-toggle svg{width:23px;height:23px;display:block}
  .af-loupe:focus-visible,
  header .header-search-toggle:focus-visible{outline:3px solid #457857;outline-offset:2px;border-radius:10px}

  /* La loupe d'origine de l'accueil était un émoji : la police y imposait
     une taille et un dessin qui changeaient d'un téléphone à l'autre. */
  header .header-search-toggle.af-loupe-dessinee{font-size:0}
  header .header-search-toggle{display:flex!important}
  header .header-search{display:none!important}
  header .header-search.mobile-open{display:flex!important}

  /* Le badge « 100 % GRATUIT » ne rentre pas dans un en-tête étroit, et la
     promesse est déjà faite sur la page elle-même. */
  header .header-badge{display:none}

  /* ==================================================================
     LE MENU PLEIN ÉCRAN
     ================================================================== */

  /* Un tiroir, pas une page. Le plein écran donnait l'impression d'avoir
     quitté le site, avec une grande zone blanche au milieu. Ici on garde
     une bande de la page visible à gauche : on sait qu'on est toujours
     dessus et qu'on y revient en touchant à côté.

     82 % de la largeur, pas 75 : sur un écran de 390 px, trois quarts ne
     laissent que 292 px et le bloc photo plus texte plus croix devient
     serré. 82 % donnent 320 px, ce qui respire. */
  .af-menu-plein{
    position:fixed;top:0;right:0;bottom:0;z-index:125;
    width:82%;max-width:360px;min-width:270px;
    display:flex;flex-direction:column;
    height:100vh;height:100dvh;
    background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
    box-shadow:-14px 0 40px rgba(30,50,35,.18);
    transform:translateX(100%);
    transition:transform .24s cubic-bezier(.32,.72,.3,1)
  }
  .af-menu-plein.af-ouvert{transform:translateX(0)}

  /* Le voile : assez léger pour qu'on distingue la page derrière, assez
     marqué pour dire qu'elle est en pause. */
  .af-voile{
    position:fixed;inset:0;z-index:118;
    background:rgba(30,50,35,.34);
    opacity:0;transition:opacity .24s ease
  }
  .af-voile.af-ouvert{opacity:1}
  .af-voile[hidden]{display:none}

  /* Le corps de la page ne doit pas défiler derrière le menu. Safari
     ignore overflow:hidden ici : il faut fixer la position, et le script
     mémorise l'endroit où l'on était pour y revenir à la fermeture. */
  body.af-menu-ouvert{position:fixed;width:100%;overflow:hidden}

  .af-menu-tete{
    display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
    padding:16px 16px 18px;border-bottom:1px solid #E4EAE4
  }
  .af-menu-photo{
    width:52px;height:52px;border-radius:50%;object-fit:cover;
    border:2px solid #E4EAE4;display:block
  }
  .af-menu-nom{
    margin:2px 0 5px;font-family:'Fraunces',Georgia,serif;
    font-size:1.18rem;font-weight:600;color:#252F28
  }
  .af-menu-phrase{margin:0;font-size:.79rem;line-height:1.5;color:#566060}

  .af-menu-fermer{
    width:40px;height:40px;flex:0 0 auto;padding:0;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #DCE5DE;border-radius:12px;background:#fff;
    color:#252F28;cursor:pointer
  }
  .af-menu-fermer svg{width:22px;height:22px;display:block}

  .af-menu-corps{flex:1 1 auto;padding:16px 12px 8px}

  .af-menu-titre{
    margin:14px 0 6px;padding:0 8px;
    font-size:.72rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:#6B7570
  }
  .af-menu-titre[hidden],.af-menu-groupe[hidden]{display:none}

  .af-menu-groupe{display:flex;flex-direction:column;gap:2px}

  /* Les entrées : les boutons repris de l'en-tête et les liens ajoutés
     doivent se ressembler au point qu'on ne devine pas la différence. */
  /* Des lignes de navigation, toutes identiques. Les boutons repris de
     l'en-tête arrivent avec leurs capsules arrondies et leurs bordures :
     tout est neutralisé ici, sinon on verrait du premier coup d'œil
     lesquelles étaient là avant et lesquelles ont été ajoutées. */
  .af-menu-plein .af-menu-item{
    display:flex!important;align-items:center;justify-content:space-between;
    gap:10px;width:100%;min-height:50px;padding:12px 14px;text-align:left;
    border:none!important;border-radius:10px;background:none!important;
    box-shadow:none!important;text-decoration:none;
    font:600 .93rem 'DM Sans',sans-serif!important;color:#252F28!important;
    cursor:pointer;letter-spacing:normal
  }
  .af-menu-plein .af-menu-item:hover,
  .af-menu-plein .af-menu-item:focus-visible{background:#EDF5EF}

  .af-menu-libelle{flex:1 1 auto;min-width:0}

  .af-menu-fleche{flex:0 0 auto;display:flex;color:#9AA4A0}
  .af-menu-fleche svg{width:17px;height:17px;display:block}
  .af-menu-item:hover .af-menu-fleche{color:#5A6460}

  /* Une fine séparation entre les lignes, sauf sous la dernière. */
  .af-menu-groupe .af-menu-item + .af-menu-item{
    border-top:1px solid #EFF3EF!important;border-radius:0
  }

  /* Le groupe des professionnels est volontairement en retrait : un
     professionnel qui le cherche le trouve, une famille ne le voit pas
     avant les entrées qui la concernent. */
  .af-menu-titre--pro{margin-top:20px;padding-top:16px;
    border-top:1px solid #E4EAE4}
  .af-menu-groupe--pro .af-menu-item{
    font-weight:500!important;color:#566060!important;font-size:.88rem!important
  }

  .af-menu-pied{
    display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
    padding:18px 18px 4px;margin-top:8px;border-top:1px solid #E4EAE4
  }
  .af-menu-legal{
    border:none;background:none;padding:6px 2px;cursor:pointer;
    font:500 .8rem 'DM Sans',sans-serif;color:#5A6460;text-decoration:underline
  }

  /* ==================================================================
     LA RECHERCHE, pour les pages qui n'en avaient pas
     ================================================================== */

  .af-rech{
    position:sticky;top:0;z-index:70;
    padding:10px 12px 12px;background:#fff;
    border-bottom:1px solid #E4EAE4;
    box-shadow:0 6px 18px rgba(30,50,35,.07)
  }
  .af-rech-ligne{
    display:flex;align-items:center;gap:8px;
    padding:6px 8px 6px 12px;
    border:1.5px solid #DCE5DE;border-radius:14px;background:#F8FBF8
  }
  .af-rech-icone{display:flex;color:#8A9490;flex:0 0 auto}
  .af-rech-icone svg{width:19px;height:19px;display:block}

  /* 16 px minimum : en dessous, iOS zoome tout seul dès qu'on touche le
     champ, et la page reste agrandie ensuite. */
  .af-rech-champ{
    flex:1 1 auto;min-width:0;border:none;background:none;outline:none;
    font:400 16px 'DM Sans',sans-serif;color:#252F28;padding:8px 0
  }
  .af-rech-fermer{
    width:38px;height:38px;flex:0 0 auto;padding:0;
    display:flex;align-items:center;justify-content:center;
    border:none;background:none;color:#566060;cursor:pointer
  }
  .af-rech-fermer svg{width:19px;height:19px;display:block}

  .af-rech-resultats{
    max-height:60vh;max-height:60dvh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;margin-top:8px
  }
  .af-rech-item{
    display:flex;flex-direction:column;gap:2px;
    padding:12px 14px;border-radius:12px;text-decoration:none;
    min-height:52px;justify-content:center
  }
  .af-rech-item:hover,.af-rech-item:focus-visible{background:#EDF5EF}
  .af-rech-titre{font:600 .93rem 'DM Sans',sans-serif;color:#252F28}
  .af-rech-situation{font-size:.76rem;color:#6B7570}
  .af-rech-vide{margin:12px 14px;font-size:.86rem;line-height:1.6;color:#566060}

  /* ==================================================================
     LA BARRE DU BAS
     ================================================================== */

  .af-barre{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    display:flex;align-items:stretch;
    background:rgba(255,255,255,.97);
    border-top:1px solid #E4EAE4;
    padding-bottom:env(safe-area-inset-bottom,0px);
    transition:transform .22s ease;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
  }

  /* Cachée après une vraie descente, elle glisse vers le bas sans
     disparaître d'un coup. La réserve de l'encoche est comprise dans le
     déplacement, sinon un liseré resterait visible sur iPhone. */
  .af-barre-cachee{transform:translateY(calc(100% + env(safe-area-inset-bottom,0px)))}

  /* Effacée pour de bon : pendant le formulaire d'inscription, le bas de
     l'écran appartient à ses propres boutons. */
  .af-barre-effacee{display:none}

  .af-barre-item{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:8px 2px 9px;min-height:58px;
    text-decoration:none;color:#5A6460;
    font:600 .72rem 'DM Sans',sans-serif;text-align:center
  }
  .af-barre-icone{display:flex;align-items:center;justify-content:center}
  .af-barre-icone svg{width:23px;height:23px;display:block}
  .af-barre-texte{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    letter-spacing:.01em
  }
  /* Le bleu de la marque tombe à 3,9 pour 1 sur du blanc : lisible pour un
     aplat, pas pour un libellé de onze pixels. On le fonce pour le texte,
     l'icône garde la couleur de la marque. */
  .af-barre-item.est-actif{color:#356F9C;font-weight:700}
  .af-barre-item.est-actif .af-barre-icone{color:#4A86B8}
  .af-barre-item:focus-visible{outline:3px solid #457857;outline-offset:-3px;border-radius:10px}

  /* La barre couvre le bas de la page : sans cette réserve, la dernière
     ligne du pied de page passe dessous et devient illisible. Quand la
     barre s'efface, la réserve s'en va avec elle. */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  body.af-barre-absente{padding-bottom:0}

  /* ==================================================================
     L'AVIS « pas encore de parcours »
     ================================================================== */

  .af-avis-fond{
    position:fixed;inset:0;z-index:130;
    display:flex;align-items:center;justify-content:center;padding:22px;
    background:rgba(30,50,35,.42)
  }
  .af-avis{
    width:100%;max-width:340px;padding:24px 22px;
    border-radius:18px;background:#fff;text-align:center;
    box-shadow:0 18px 44px rgba(30,50,35,.24)
  }
  .af-avis-titre{
    margin:0 0 10px;font-family:'Fraunces',Georgia,serif;
    font-size:1.1rem;font-weight:600;color:#252F28
  }
  .af-avis-texte{margin:0 0 20px;font-size:.88rem;line-height:1.6;color:#566060}
  .af-avis-oui{
    display:block;min-height:50px;line-height:50px;padding:0 18px;
    border-radius:999px;background:#4A86B8;color:#fff;text-decoration:none;
    font:700 .92rem 'DM Sans',sans-serif
  }
  .af-avis-non{
    margin-top:10px;padding:10px;border:none;background:none;cursor:pointer;
    font:600 .84rem 'DM Sans',sans-serif;color:#5A6460
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   À L'IMPRESSION

   Les fiches sont faites pour être imprimées et emportées chez l'assistante
   sociale : elles ont même un pied de page prévu pour le papier. Une barre
   de navigation, un menu ou un champ de recherche n'ont rien à y faire, et
   la réserve qu'ils prennent en bas de l'écran laisserait une bande blanche
   sur chaque page imprimée.
   ───────────────────────────────────────────────────────────────────────── */
@media print{
  .af-barre,.af-menu-plein,.af-rech,.af-menu-bouton,.af-loupe,.af-avis-fond{
    display:none!important
  }
  body{padding-bottom:0!important}
}

/* ─────────────────────────────────────────────────────────────────────────
   LE GROSSISSEMENT DU TEXTE

   Le réglage « taille du texte » du panneau Aide agrandit le corps de la
   page avec zoom, jusqu'à 1,32. Or un élément fixé à l'écran qui vit dans
   un corps agrandi voit sa largeur agrandie elle aussi : la barre du bas et
   le menu plein écran auraient débordé d'un tiers vers la droite, avec une
   barre de défilement horizontale sur toute la page.

   On leur rend donc leur échelle d'origine, puis on agrandit leur texte à
   la main. La personne qui a demandé un texte plus grand l'obtient aussi
   dans la navigation, sans que rien ne déborde.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:760px){
  html[data-af-taille="2"] .af-barre,
  html[data-af-taille="2"] .af-menu-plein,
  html[data-af-taille="2"] .af-rech,
  html[data-af-taille="2"] .af-avis-fond{zoom:.8696}

  html[data-af-taille="3"] .af-barre,
  html[data-af-taille="3"] .af-menu-plein,
  html[data-af-taille="3"] .af-rech,
  html[data-af-taille="3"] .af-avis-fond{zoom:.7576}

  html[data-af-taille="2"] .af-barre-texte{font-size:.83rem}
  html[data-af-taille="3"] .af-barre-texte{font-size:.95rem}
  html[data-af-taille="2"] .af-menu-plein .af-menu-item{font-size:1.1rem;min-height:58px}
  html[data-af-taille="3"] .af-menu-plein .af-menu-item{font-size:1.27rem;min-height:62px}
  html[data-af-taille="2"] .af-rech-champ{font-size:18px}
  html[data-af-taille="3"] .af-rech-champ{font-size:21px}
}

/* ─────────────────────────────────────────────────────────────────────────
   MOUVEMENT RÉDUIT

   Certaines personnes règlent leur téléphone pour supprimer les animations,
   parce qu'elles leur donnent le vertige ou les désorientent. On respecte
   ce réglage : tout reste, mais rien ne bouge.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .af-menu-plein{animation:none}
  .af-barre{transition:none}
}

/* Le bandeau des logos, quand il descend en bas de l'accueil sur téléphone. */
@media (max-width:760px){
  .af-reco.af-reco-en-bas{
    max-width:640px;margin:26px auto 0;padding-top:20px;
    border-top:1px solid #DCE5DE;text-align:center
  }
  .af-reco.af-reco-en-bas .af-reco-logos{justify-content:center}
  .af-reco.af-reco-en-bas .af-reco-lien{margin-top:12px}
}