/* Zones a surveiller - meteo-71.fr
   Volontairement sobre et sans police importee : la page vit DANS le theme du
   site, elle doit s'y fondre. Les couleurs sont neutres et heritent de la taille
   de texte du theme plutot que de l'imposer. */

/* ---------------------------------------------------------------------------
   L'ATTRIBUT hidden DOIT GAGNER. A lire avant de toucher au reste.
   ---------------------------------------------------------------------------
   Le « display:none » de l'attribut hidden vient de la feuille du NAVIGATEUR.
   Toute regle d'auteur qui pose un display - .m71-bouton en inline-block,
   .m71-etape en grid, .m71-appareil en flex - la bat, quelle que soit la
   specificite : les styles d'auteur passent devant ceux du navigateur.

   Consequence observee le 26 aout : les trois boutons d'activation
   s'affichaient EN MEME TEMPS alors que le JavaScript n'en voulait qu'un.
   Yannick a cherche vingt minutes lequel cliquer, et il n'y avait rien a
   trouver - la page en montrait trois. Le defaut n'etait pas dans la logique,
   qui posait bien hidden, mais dans cette collision de cascade.

   Une seule ligne repare tout, et le !important est ici a sa place : c'est la
   regle qui doit battre toutes les autres, par definition.
--------------------------------------------------------------------------- */
[hidden] { display: none !important; }

.m71-bloc { max-width: 760px; margin: 0 auto; }
.m71-bloc h3 { margin: 1.6em 0 .5em; }
.m71-bloc h4 { margin: 0 0 .6em; }
.m71-discret { color: #667; font-size: .92em; }
.m71-formule { margin: .2em 0 1em; }

.m71-alerte {
  background: #fff4f4; border: 1px solid #e2b6b6; border-left-width: 4px;
  color: #8a2020; padding: .7em .9em; border-radius: 4px; margin: 1em 0;
}
.m71-info {
  background: #f4f7ff; border: 1px solid #c9d6f2; border-left-width: 4px;
  padding: .9em; border-radius: 4px;
}

.m71-bouton {
  display: inline-block; padding: .55em 1.1em; border: none; border-radius: 6px;
  background: #2980ff; color: #fff; cursor: pointer; font: inherit; line-height: 1.2;
  /* Cette classe habille tantot un <button>, tantot un <a> - le resume pose
     sur « Mon compte » est un lien. Le theme du site souligne ses liens, ce
     qui donnait un bouton bleu au libelle souligne. On neutralise ici, et sur
     :hover aussi, sinon le soulignement revient au survol. */
  text-decoration: none;
}
.m71-bouton:hover, .m71-bouton:focus { text-decoration: none; }
.m71-bouton:hover:not(:disabled) { background: #1c6fe0; }
.m71-bouton:disabled { background: #b9c3d4; cursor: not-allowed; }
.m71-secondaire { background: #eceff5; color: #333; }
.m71-secondaire:hover:not(:disabled) { background: #dde2ec; }

.m71-liste { list-style: none; padding: 0; margin: 0 0 1.2em; }
.m71-zone {
  display: flex; align-items: center; gap: .5em; flex-wrap: wrap;
  padding: .6em .8em; border: 1px solid #dde2ec; border-radius: 6px;
  margin-bottom: .5em;
}
/* La bordure de gauche distingue une adresse d'une parcelle sans qu'il faille
   lire l'etiquette : sur une liste de quatre lignes, l'oeil trie plus vite une
   couleur qu'un mot. */
.m71-zone-adresse  { border-left: 4px solid #2980ff; }
.m71-zone-parcelle { border-left: 4px solid #1a9850; }
.m71-zone .m71-supprimer { margin-left: auto; }

.m71-carte-bloc {
  border: 1px solid #dde2ec; border-radius: 8px; padding: 1em; margin: 1em 0;
}
.m71-carte {
  height: 420px; border-radius: 6px; margin: .6em 0; z-index: 0;
}
.m71-bloc input[type="text"], .m71-bloc input[type="tel"],
.m71-bloc input[type="number"], .m71-bloc select {
  padding: .45em .6em; border: 1px solid #c6cddb; border-radius: 5px;
  font: inherit; box-sizing: border-box;
}
.m71-bloc input[type="text"], .m71-bloc input[type="tel"] { width: 100%; max-width: 440px; }
.m71-bloc input[type="range"] { width: 100%; max-width: 440px; }
.m71-bloc label { display: inline-block; margin: .5em .4em .2em 0; }

.m71-suggestions { list-style: none; margin: .2em 0 .8em; padding: 0; max-width: 440px; }
.m71-suggestions li {
  padding: .45em .6em; border: 1px solid #dde2ec; border-top: none; cursor: pointer;
}
.m71-suggestions li:first-child { border-top: 1px solid #dde2ec; border-radius: 5px 5px 0 0; }
.m71-suggestions li:last-child { border-radius: 0 0 5px 5px; }
.m71-suggestions li:hover { background: #f2f6ff; }

.m71-ligne { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; margin: .6em 0; }
.m71-ligne input[type="number"] { width: 5em; }

/* Le consentement se lit : on lui laisse de l'air et une vraie largeur de ligne.
   Une case a cocher serree contre un pave de texte gris ne se lit pas, et un
   consentement qu'on ne lit pas n'en est pas un. */
.m71-consentement {
  display: flex; gap: .7em; align-items: flex-start;
  margin: 1em 0; line-height: 1.5; max-width: 62ch;
}
.m71-consentement input { margin-top: .25em; flex-shrink: 0; }
.m71-rgpd { margin-top: 1.4em; border-top: 1px solid #e6e9f0; padding-top: .8em; }

@media (max-width: 600px) {
  .m71-carte { height: 320px; }
  .m71-zone .m71-supprimer { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   LES TROIS ETAPES
   ---------------------------------------------------------------------------
   Le rang numerote n'est pas un ornement. Ces trois blocs forment une vraie
   sequence - sans appareil autorise, une zone ne sert a rien ; sans zone, le
   consentement ne sert a rien - et le lecteur doit voir ou il en est sans
   avoir a le deduire. Un numero le dit mieux qu'un titre.
--------------------------------------------------------------------------- */
.m71-etape {
  display: grid; grid-template-columns: 2.2em 1fr; gap: .9em;
  padding: 1.1em 0; border-top: 1px solid #e6eaf1;
}
.m71-etape:first-of-type { border-top: none; padding-top: .3em; }
.m71-etape-rang {
  width: 2.2em; height: 2.2em; border-radius: 50%;
  background: #0e2a3a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1;
}
.m71-etape-corps { min-width: 0; }
.m71-etape-corps > h3:first-child { margin-top: .25em; }

/* L'ETAT, EN CLAIR ET EN COULEUR.
   Trois situations qui ne demandent pas la meme chose : « vous recevez »,
   « vous ne recevez pas encore, cliquez », « cela ne peut pas fonctionner
   ici, voici pourquoi ». Une seule phrase grise pour les trois obligerait a
   la lire en entier pour savoir laquelle c'est. */
.m71-etat {
  margin: .2em 0 .9em; padding: .55em .8em; border-radius: 6px;
  border-left: 4px solid #b9c3d4; background: #f5f7fa; font-weight: 600;
}
.m71-etat[data-etat="actif"]      { border-left-color: #1a9850; background: #f1f9f3; color: #12603a; }
.m71-etat[data-etat="inactif"]    { border-left-color: #e9a029; background: #fdf7ec; color: #7a4d06; }
.m71-etat[data-etat="impossible"] { border-left-color: #c0392b; background: #fdf3f2; color: #8a2020; }
.m71-etat[data-etat="attente"]    { font-weight: 400; color: #667; }

/* L'action principale de la page. Elle etait auparavant un bouton secondaire
   gris perdu dans un paragraphe, et personne ne la trouvait. */
.m71-bouton-grand {
  font-size: 1.06em; padding: .8em 1.4em; font-weight: 700;
}

.m71-ios {
  border: 1px solid #cfd9e6; border-left: 4px solid #0e2a3a;
  border-radius: 6px; padding: .9em 1em; margin: 0 0 1em; background: #f7f9fc;
}
.m71-ios h4 { margin-top: 0; }
.m71-ios-etapes { margin: .6em 0 .6em 1.2em; padding: 0; }
.m71-ios-etapes li { margin-bottom: .45em; }

.m71-appareils { list-style: none; padding: 0; margin: 0 0 .6em; }
.m71-appareil {
  display: flex; align-items: center; gap: .6em; flex-wrap: wrap;
  padding: .5em .7em; border: 1px solid #dde2ec; border-radius: 6px;
  margin-bottom: .4em;
}
.m71-appareil-actuel { border-left: 4px solid #1a9850; }
.m71-ici {
  font-size: .8em; text-transform: uppercase; letter-spacing: .06em;
  background: #e8f5ec; color: #12603a; padding: .15em .5em; border-radius: 999px;
}
.m71-appareil .m71-lien-supprimer { margin-left: auto; }
.m71-lien-supprimer {
  background: none; border: none; color: #8a2020; cursor: pointer;
  font: inherit; text-decoration: underline; padding: 0;
}

@media (max-width: 480px) {
  .m71-etape { grid-template-columns: 1.8em 1fr; gap: .6em; }
  .m71-etape-rang { width: 1.8em; height: 1.8em; font-size: .9em; }
  .m71-bouton-grand { width: 100%; }
}

/* ---------------------------------------------------------------------------
   LE RESUME, POSE AILLEURS SUR LE SITE
   ---------------------------------------------------------------------------
   Il vit dans une page qui n'est pas la sienne - « Mon compte », le plus
   souvent - et doit donc se tenir : une bordure, un peu d'air, et rien qui
   impose une police ou une couleur de fond au theme qui l'accueille.
--------------------------------------------------------------------------- */
.m71-resume {
  border: 1px solid #dde2ec; border-radius: 8px; padding: 1em 1.1em;
  margin: 1.2em 0; max-width: 560px;
}
.m71-resume h4 { margin: 0 0 .6em; }
.m71-resume .m71-etat { margin: 0 0 .7em; }
.m71-resume p:last-child { margin-bottom: 0; }
/* Un probleme se voit de loin : c'est tout l'interet de mettre ce bloc sur une
   page ou l'on passe pour autre chose. */
.m71-resume-probleme { border-color: #e2b6b6; }
.m71-resume-actif    { border-color: #bfe0c8; }