/* ===========================================================================
   TÉLÉPHONE — les corrections d'affichage sur petit écran
   ---------------------------------------------------------------------------
   POURQUOI CE FICHIER EXISTE
   Le site a été dessiné pour un grand écran. Plusieurs blocs écrits APRÈS la
   partie « RESPONSIVE » de style.css sont venus, sans le vouloir, effacer ses
   règles : en CSS, à force égale, c'est la dernière règle lue qui gagne, et
   une règle placée dans un « @media » n'a aucune force en plus. Le cas le
   plus visible : « .nav{display:none} » (ligne 510 de style.css, dans le
   @media 900 px) était annulé par « .nav{display:flex} » (ligne 965 du même
   fichier). Résultat sur un téléphone : le menu d'ordinateur restait affiché,
   « Contact » et le bouton sortaient de l'écran, et le bouton du menu
   (les deux traits) se retrouvait poussé hors de l'écran — on ne pouvait
   donc plus ouvrir le menu du tout.

   COMMENT C'EST RÉGLÉ
   Cette feuille est chargée EN DERNIER sur les 7 pages. Ses règles gagnent
   donc naturellement, sans avoir besoin d'un seul « !important ».

   RÈGLES RESPECTÉES
   - aucune animation n'est le seul moyen de voir un contenu ;
   - uniquement transform et opacity ;
   - aucun nom de classe nouveau n'est inventé ici : on ne fait que
     réajuster des classes qui existent déjà ;
   - rien ne change au-dessus de 900 px de large.
   =========================================================================== */


/* ===========================================================================
   1. L'EN-TÊTE FLOTTANTE
   =========================================================================== */
@media (max-width:900px){

  /* Le menu d'ordinateur disparaît ; le bouton à deux traits revient, il est
     réaffiché plus bas en même temps qu'on corrige sa forme. */
  .nav{display:none}
  .hdr__cta .btn{display:none}

  /* La barre flottante se resserre : sur 390 px, 9 px de marge intérieure
     collaient le logo au bord arrondi. */
  .hdr{padding-top:10px}
  .hdr.is-stuck{padding-top:6px}
  .hdr__in{height:56px;gap:10px;padding-inline:14px 8px;border-radius:17px}

  /* Le logo et le bouton du menu : au moins 44 px de haut à toucher.
     La hauteur du dessin ne change pas, c'est la zone sensible qui grandit. */
  .logo{padding-left:0;min-height:44px}

  /* 🔴 Le bouton était en « display:grid » : la grille étirait ses deux
     lignes sur toute la hauteur, donc les deux traits s'écartaient au lieu
     de rester collés (22 px d'écart au lieu de 5,5). En passant en colonne
     souple, l'écart redevient celui prévu — et la croix de fermeture, qui
     rapproche les traits de 3,5 px chacun, retombe juste. */
  .burger{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:44px;height:44px;
  }
  .burger i{width:21px;height:2px}
  .burger i+i{margin-top:5.5px}

  /* Le menu déroulant part juste sous la barre. 10 (marge) + 56 (barre)
     + 8 d'air = 74 px. Avant, il était calé à 88 px : il flottait dans le
     vide sur un téléphone. */
  .mnav{inset:74px 0 auto}
  .mnav a{
    display:flex;align-items:center;min-height:48px;
    padding:12px 6px;font-size:1.08rem;
  }
  .mnav .btn{justify-content:center;min-height:50px;margin-top:14px}

  /* Le contenu des pages intérieures commence sous la barre : 10 + 56 = 66,
     plus 10 px d'air. */
  .page{padding-top:76px}
}


/* ===========================================================================
   2. LE DÉBORDEMENT SUR LE CÔTÉ
   ---------------------------------------------------------------------------
   Mesuré : la carte du questionnaire arrive en glissant de 26 px vers la
   gauche. Le temps de l'animation (0,42 s), la page devenait plus large que
   l'écran et glissait de côté sous le doigt. On coupe ce dépassement au ras
   de la scène. « clip » et non « hidden » : hidden aurait transformé la zone
   en boîte à défilement et cassé les positions collantes.
   =========================================================================== */
.qz__stage{overflow-x:clip}

/* Même précaution, mais UNIQUEMENT sur petit écran : si un jour un bloc
   dépasse, il est coupé au lieu de faire glisser toute la page de côté.
   « clip » et pas « hidden » : hidden ferait du document une boîte à
   défilement et casserait les sections qui se figent au défilement
   (le mot « Sitero », « Toulouse », la traversée).
   Volontairement laissé hors du grand écran, où ces sections figées sont
   les plus longues et où rien ne dépasse (vérifié à 1400 px). */
@media (max-width:900px){
  html,body{overflow-x:clip}
}


/* ===========================================================================
   3. CE QUI SE TOUCHE : 44 px MINIMUM
   ---------------------------------------------------------------------------
   Mesuré avant correction : liens du pied de page 28 px, « Retour à
   l'accueil » 23 px, liens des mentions légales 21 px. Trop petit pour un
   doigt : on grandit la zone sensible, pas le texte.
   =========================================================================== */
@media (max-width:900px){

  /* pied de page */
  .ft__nav a,.ft__nav span{
    display:flex;align-items:center;min-height:44px;padding:2px 0;
    font-size:.92rem;
  }
  .ft__nav h3{font-size:.86rem;margin-bottom:6px}
  .ft__btm{font-size:.82rem;line-height:1.6}

  /* pages « Mentions légales » et « Confidentialité » */
  .lgl-back{
    display:inline-flex;align-items:center;min-height:44px;
    padding-inline:2px;
  }
  .lgl-ft__in nav a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .lgl-ft__in nav{display:flex;flex-wrap:wrap;gap:0 22px}

  /* le lien du partenaire, page Formules */
  .pv__lien{
    display:inline-flex;align-items:center;min-height:44px;
  }

  /* page Contact : le bloc « e-mail / téléphone / ville » se touche du
     doigt, c'est le premier réflexe d'un visiteur pressé. */
  .ct__co{gap:6px}
  .ct__co li{min-height:46px}
  .ct__co a{display:flex;align-items:center;min-height:46px}

  /* les pastilles Oui / Non / Je ne sais pas du formulaire */
  .rad{min-height:46px;margin-right:10px;margin-bottom:8px}
}

/* Les liens à l'intérieur d'une phrase (les « web3forms.com » ou
   « www.cnil.fr » des pages légales) restent à la taille du texte : les
   grandir casserait l'interligne du paragraphe, et la règle des 44 px ne
   s'applique justement pas aux liens intégrés dans une phrase. */


/* ===========================================================================
   4. LES TITRES ET LES ESPACEMENTS
   ---------------------------------------------------------------------------
   Les tailles de titre sont déjà en clamp() et tiennent (mesuré : le h1 de
   l'accueil fait 41,6 px et tient sur deux lignes à 390 px comme à 360 px).
   Ce qui manquait, c'est l'air : la gouttière tombe à 20 px sur un
   téléphone, et les blocs blancs avaient gardé leur marge intérieure de
   grand écran, ce qui écrasait le texte contre les bords.
   =========================================================================== */
@media (max-width:430px){

  /* Un mot très long (une adresse, un nom de domaine) ne doit jamais
     dépasser : il se coupe proprement au lieu de pousser la page. */
  h1,h2,h3,h4,p,li,td,th,dd,dt{overflow-wrap:break-word}

  /* Les grandes cartes blanches respirent au lieu d'être bourrées. */
  .qz__card{padding:22px 18px}
  .cmp__aide{padding:24px 20px}

  /* Le questionnaire : la question et les réponses restent lisibles. */
  .qz__q{font-size:1.28rem}
  .qz__aide{font-size:.94rem}
}


/* ===========================================================================
   5. LE TABLEAU DE COMPARAISON (page Formules)
   ---------------------------------------------------------------------------
   Le tableau se fait glisser du doigt vers la droite, c'est voulu et c'est
   écrit juste au-dessus de lui. Mais à 390 px, la colonne des libellés
   mangeait la moitié de l'écran (mesuré : 195 px sur 390) : on ne voyait
   qu'une seule formule et rien ne laissait deviner qu'il y en avait
   d'autres à droite. On resserre pour qu'un morceau de la colonne suivante
   dépasse : c'est ce bout visible qui donne envie de glisser.
   =========================================================================== */
@media (max-width:430px){
  .cmp__tab{font-size:.85rem;min-width:530px}
  .cmp__tab th,.cmp__tab td{padding:12px 11px}
  .cmp__tab th[scope="row"]{min-width:128px}
  .cmp__th i{font-size:1.2rem}
}


/* ===========================================================================
   6. LES FICHES QUI S'OUVRENT AU SURVOL
   ---------------------------------------------------------------------------
   Sur un téléphone il n'y a pas de survol : fiche.css ouvre déjà la fiche
   en permanence (@media hover:none). Il restait un détail mesuré à 360 px :
   la mention « Cofondateur de Vizion » dépassait de sa pastille de 12 px.
   =========================================================================== */
@media (hover:none){
  .fiche__cta{
    white-space:normal;text-align:left;line-height:1.35;
  }
}

/* Filet de sécurité : certains téléphones et certains navigateurs
   répondent quand même « je sais survoler ». Sous 900 px de large, on
   ouvre donc la fiche de toute façon — le numéro de téléphone est une
   information, il ne doit jamais dépendre d'un geste impossible. */
@media (max-width:900px){
  .fiche__plus{grid-template-rows:1fr;opacity:1;margin-top:9px}
  .fiche__tel{font-size:1.06rem}
  .fiche__cta{white-space:normal;text-align:left;line-height:1.35}

  /* Une fois ouverte, la fiche n'est plus une pastille : c'est une carte.
     Le très grand arrondi (999 px) rognait ses coins sur trois lignes de
     texte, et la ligne « c'est moi qui décroche » venait mourir sur le
     trait du bas. On lui donne la forme et l'air que la version
     ordinateur lui donne déjà au survol. */
  .fiche{
    display:flex;
    border-radius:20px;
    padding:12px 18px 14px 12px;
    align-items:flex-start;
    margin-bottom:14px;
  }
  .fiche__ph{margin-top:2px}

  /* 🔴 La « fente » d'apropos.css réserve 78 px et pose la fiche PAR-DESSUS
     le paragraphe suivant : c'est juste sur un ordinateur, où la fiche n'est
     ouverte que le temps du survol. Ici elle est ouverte en permanence, donc
     elle doit reprendre sa place dans le flux, sinon elle recouvre la phrase
     « Basé à Toulouse… ». */
  .ab-me__fente{position:static;height:auto}
  .ab-me__fente .fiche{position:static}
}


/* ===========================================================================
   7. MOUVEMENT RÉDUIT
   Rien de ce qui précède n'anime quoi que ce soit ; on garde tout de même
   la promesse : aucune de ces règles ne dépend d'une animation.
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  .qz__stage{overflow-x:clip}
}