/* =========================================================
   BANC PÉDAGOGIQUE DRONE
   Feuille de style commune
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin: 0;
    padding: 20px;
    background: #f3f4f6;
    color: #20242a;
}

.page {
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.header h1 {
    margin: 0;
    font-size: 26px;
    letter-spacing: .3px;
}

.subtitle {
    margin-top: 5px;
    color: #70757d;
    font-size: 14px;
}

.btn-general {
    border: 1px solid #3678b8;
    background: #eaf3fb;
    color: #234f78;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.btn-general:hover {
    background: #dcecf9;
}


/* =========================================================
   PAGE D'ACCUEIL
   ========================================================= */

.content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.banc {
    background: white;
    border: 1px solid #cfd4da;
    border-radius: 15px;
    padding: 15px;
}


/* =========================================================
   PLATINE HAUTE
   ========================================================= */

.platine-haute {
    display: grid;
    grid-template-columns: 1fr 2.2fr 1fr;
    gap: 14px;
    min-height: 340px;
}

.module {
    position: relative;
    border-radius: 12px;
    border: 2px solid #c8ccd1;
    cursor: pointer;
    transition: .2s;
    padding: 15px;
}

.module:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.module h2 {
    text-align: center;
    font-size: 15px;
    margin: 0 0 20px;
}


/* =========================================================
   FPV
   ========================================================= */

.fpv {
    background: rgba(105, 70, 145, .20);
    border-color: #74529b;
}

.ecran-fpv {
    width: 100px;
    height: 65px;
    margin: 35px auto 20px;
    background: #30343a;
    border: 4px solid #74529b;
    border-radius: 5px;
}

.fpv p {
    text-align: center;
    margin: 5px;
    font-size: 13px;
}


/* =========================================================
   DRONE
   ========================================================= */

.drone {
    background: #fafafa;
}

.drone-dessin {
    position: relative;
    width: 230px;
    height: 230px;
    margin: 20px auto;
}

.bras {
    position: absolute;
    width: 170px;
    height: 12px;
    background: #4d718f;
    left: 30px;
    top: 109px;
    transform-origin: center;
    border-radius: 6px;
}

.bras1 {
    transform: rotate(45deg);
}

.bras2 {
    transform: rotate(-45deg);
}

.fc {
    position: absolute;
    width: 65px;
    height: 65px;
    left: 82px;
    top: 82px;
    background: white;
    border: 3px solid #4d718f;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 3;
}

.moteur {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: white;
    border: 4px solid #4d718f;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 2;
}

.m1 {
    left: 10px;
    top: 10px;
}

.m2 {
    right: 10px;
    top: 10px;
}

.m3 {
    right: 10px;
    bottom: 10px;
}

.m4 {
    left: 10px;
    bottom: 10px;
}


/* =========================================================
   SIMULATION DE PANNES
   ========================================================= */

.pannes {
    background: rgba(110, 25, 30, .15);
    border-color: #792a2e;
}

.liste-pannes {
    margin-top: 35px;
}

.panne {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    font-size: 13px;
}

.led {
    width: 12px;
    height: 12px;
    background: #812d31;
    border-radius: 50%;
    flex: 0 0 auto;
}


/* =========================================================
   PARTIE BASSE
   ========================================================= */

.platine-basse {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    gap: 14px;
    margin-top: 14px;
}

.bas {
    min-height: 105px;
    border: 1px solid #c8ccd1;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    text-align: center;
    transition: .2s;
}

.bas:hover {
    background: #f4f7f9;
}

.bas strong {
    display: block;
    margin-bottom: 10px;
}

.signal {
    font-family: monospace;
    font-size: 20px;
    letter-spacing: 2px;
    color: #575d66;
    margin-top: 15px;
}


/* =========================================================
   PANNEAU D'INFORMATION
   ========================================================= */

.info {
    background: white;
    border: 1px solid #cfd4da;
    border-radius: 15px;
    padding: 22px;
    min-height: 300px;
}

.info-type {
    text-transform: uppercase;
    font-size: 12px;
    color: #7a8088;
    font-weight: bold;
}

.info h2 {
    margin: 10px 0 15px;
    font-size: 21px;
}

.info p {
    line-height: 1.6;
    color: #555c64;
}

.ouvrir {
    display: none;
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: #3678b8;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.ouvrir:hover {
    background: #28659e;
}

        /* =====================================================
           PHOTO INTERACTIVE
           ===================================================== */
           .photo-banc {
               position: relative;
               width: 100%;
               max-width: 1100px;
               margin: 20px auto;
           }

           .photo-banc img {
               position: relative;
               z-index: 1;

               display: block;
               width: 100%;
               height: auto;
           }

        /* Zone cliquable */
        .zone {
            position: absolute;
            z-index: 20;

            cursor: pointer;

            border: 3px solid #1683d8;
            background: rgba(22, 131, 216, 0.20);

            border-radius: 8px;

            pointer-events: auto;
        }

        .zone:hover {
            background: rgba(22, 131, 216, 0.40);
            border-color: #005fa8;
        }

        /* =====================================================
           POSITION DES ZONES SUR LA PHOTO
           valeurs en % pour rester responsive
           ===================================================== */

        /* écran principal */

        .zone-ecran {
            left: 29%;
            top: 0%;
            width: 35%;
            height: 36%;
        }

        /* module FPV */

        .zone-fpv {
            left: 13%;
            top: 38%;
            width: 20%;
            height: 23%;
        }

        /* plateforme drone */

        .zone-drone {
            left: 34%;
            top: 38%;
            width: 30%;
            height: 27%;
        }

        /* simulation de pannes */

        .zone-pannes {
            left: 64%;
            top: 39%;
            width: 19%;
            height: 27%;
        }

        /* alimentation */

        .zone-alimentation {
            left: 8%;
            top: 65%;
            width: 25%;
            height: 17%;
        }

        /* analyseur logique
           Le mini-PC situé à droite de l'écran représente
           ici l'accès à l'analyse des signaux.
        */

        .zone-analyseur {
            left: 65%;
            top: 2%;
            width: 18%;
            height: 34%;
        }

        /* radiocommande */

        .zone-radio {
            left: 56%;
            top: 70%;
            width: 28%;
            height: 23%;
        }
        /* =========================================================
           PHOTO DU BANC DANS LA FICHE GÉNÉRALE
           ========================================================= */

        .fiche-photo-banc {
            text-align: center;
            margin: 20px auto 5px;
        }

        .fiche-photo-banc img {
            display: block;
            width: 100%;
            max-width: 420px;
            height: auto;
            margin: 0 auto;

            border-radius: 10px;
            border: 1px solid #d7dce0;

            box-shadow: 0 3px 12px rgba(0, 0, 0, .10);
        }
        .lien-stats {
            display: inline-block;
            font-size: 16px;
            text-decoration: none;
            opacity: 0.30;
            transition: opacity 0.2s ease;
            margin-left: 15px;
        }

        .lien-stats:hover {
            opacity: 1;
        }
        footer{
          margin-top:40px;color:#687c8e;font-size:.9rem}
          @media(max-width:650px){.wrap{padding:18px 14px}
          .arrow{display:none}
          .step{flex-basis:100%}}
        /* =====================================================
           MODALE
           ===================================================== */

        .modal {
            display: none;

            position: fixed;
            z-index: 1000;

            left: 0;
            top: 0;

            width: 100%;
            height: 100%;

            background: rgba(0, 0, 0, 0.65);

            align-items: center;
            justify-content: center;

            padding: 20px;
            box-sizing: border-box;
        }

        .modal-contenu {
            position: relative;

            background: white;

            width: 100%;
            max-width: 520px;

            padding: 30px;

            border-radius: 12px;

            box-shadow:
                0 10px 35px rgba(0,0,0,0.35);

            box-sizing: border-box;
        }

        .modal-type {
            color: #1683d8;

            font-size: 14px;
            font-weight: bold;

            text-transform: uppercase;

            margin-bottom: 5px;
        }

        .modal-contenu h2 {
            margin-top: 0;
            color: #102b40;
        }

        .modal-contenu p {
            line-height: 1.55;
        }

        .fermer {
            position: absolute;

            top: 10px;
            right: 15px;

            border: none;
            background: none;

            font-size: 30px;
            cursor: pointer;

            color: #555;
        }

        .ouvrir-fiche {
            display: inline-block;

            margin-top: 15px;

            padding: 12px 20px;

            background: #1683d8;
            color: white;

            border: none;
            border-radius: 6px;

            font-weight: bold;
            font-size: 15px;

            cursor: pointer;
        }


        /* =====================================================
           BOUTONS HEADER
           ===================================================== */

        .header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .btn-contact {
            display: inline-block;

            padding: 10px 18px;

            background: #1683d8;
            color: white;

            border-radius: 6px;

            text-decoration: none;
            font-weight: bold;
        }


        /* =====================================================
           SMARTPHONE
           ===================================================== */

        @media (max-width: 700px) {

            .header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .header-actions {
                width: 100%;
            }

            .btn-general,
            .btn-contact {
                flex: 1;
                text-align: center;
            }

            .modal-contenu {
                padding: 25px 20px;
            }

        }


/* =========================================================
   FICHES PÉDAGOGIQUES
   ========================================================= */

.fiche {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border: 1px solid #cfd4da;
    border-radius: 15px;
    padding: 30px 40px;
}

.fiche-header {
    border-bottom: 1px solid #dfe3e7;
    padding-bottom: 18px;
    margin-bottom: 25px;
}

.fiche-numero {
    color: #3678b8;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.fiche h1 {
    margin: 7px 0 5px;
    font-size: 28px;
}

.fiche h2 {
    margin-top: 30px;
    font-size: 20px;
    color: #263746;
}

.fiche p,
.fiche li {
    line-height: 1.65;
}

.fiche ul {
    padding-left: 22px;
}

.fiche li {
    margin-bottom: 8px;
}

.intro {
    font-size: 17px;
    color: #555c64;
}

.objectif {
    margin: 25px 0;
    padding: 18px 22px;
    border-left: 5px solid #3678b8;
    background: #f1f6fa;
    border-radius: 5px;
}

.objectif strong {
    display: block;
    margin-bottom: 5px;
}

.etapes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 25px 0;
}

.etape {
    padding: 14px 8px;
    text-align: center;
    background: #eef1f4;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
}

.a-retenir {
    margin-top: 30px;
    padding: 20px 24px;
    background: #f4f6f8;
    border-radius: 10px;
}

.a-retenir h2 {
    margin-top: 0;
}

.retour {
    display: inline-block;
    margin-bottom: 20px;
    color: #3678b8;
    text-decoration: none;
    font-weight: bold;
}

.retour:hover {
    text-decoration: underline;
}


/* =========================================================
   RESPONSIVE SMARTPHONE
   ========================================================= */

@media (max-width: 800px) {

    body {
        padding: 10px;
    }

    .header {
        align-items: flex-start;
    }

    .header h1 {
        font-size: 20px;
    }

    .btn-general {
        font-size: 12px;
        padding: 8px 10px;
    }

    .content {
        grid-template-columns: 1fr;
    }

    .platine-haute {
        grid-template-columns: 1fr;
    }

    .platine-basse {
        grid-template-columns: 1fr;
    }

    .drone-dessin {
        transform: scale(.85);
        margin-top: 0;
        margin-bottom: 0;
    }

    .fiche {
        padding: 22px 18px;
    }

    .fiche h1 {
        font-size: 23px;
    }

    .etapes {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
   STYLES MIGRÉS DE index.php
   ========================================================= */

/* =========================================================
             IMAGE INTERACTIVE
             ========================================================= */

          .photo-banc {
              position: relative !important;
              width: 100%;
              max-width: 1100px;
              margin: 20px auto;
          }

          .photo-banc img {
              display: block;
              width: 100%;
              height: auto;
          }


          /* =========================================================
             ZONES CLIQUABLES
             ========================================================= */

             .photo-banc .zone {
                 display: block !important;
                 position: absolute !important;
                 z-index: 100 !important;

                 cursor: pointer;
                 pointer-events: auto !important;

                 border: 2px solid transparent;
                 background: transparent;

                 border-radius: 8px;

                 transition: background .2s, border-color .2s;
             }

             .photo-banc .zone:hover {
                 border-color: #1683d8;
                 background: rgba(22, 131, 216, 0.18);
             }


          /* =========================================================
             POSITION DES 7 ZONES
             ========================================================= */


          /* Écran Betaflight */

          .photo-banc .zone-ecran {
              left: 29% !important;
              top: 1% !important;
              width: 34% !important;
              height: 35% !important;
          }


          /* Module FPV */

          .photo-banc .zone-fpv {
              left: 13% !important;
              top: 38% !important;
              width: 20% !important;
              height: 23% !important;
          }


          /* Plateforme drone */

          .photo-banc .zone-drone {
              left: 34% !important;
              top: 38% !important;
              width: 30% !important;
              height: 27% !important;
          }


          /* Simulation de pannes */

          .photo-banc .zone-pannes {
              left: 64% !important;
              top: 39% !important;
              width: 19% !important;
              height: 27% !important;
          }


          /* Alimentation */

          .photo-banc .zone-alimentation {
              left: 8% !important;
              top: 65% !important;
              width: 25% !important;
              height: 17% !important;
          }


          /* Analyseur logique / mini-PC */

          .photo-banc .zone-analyseur {
              left: 65% !important;
              top: 2% !important;
              width: 18% !important;
              height: 34% !important;
          }


          /* Radiocommande */

          .photo-banc .zone-radio {
              left: 56% !important;
              top: 70% !important;
              width: 28% !important;
              height: 23% !important;
          }
          #modal {
              display: none;
              position: fixed !important;
              z-index: 99999 !important;

              top: 0 !important;
              left: 0 !important;
              right: 0 !important;
              bottom: 0 !important;

              width: 100% !important;
              height: 100% !important;

              background: rgba(0, 0, 0, 0.70) !important;

              align-items: center !important;
              justify-content: center !important;
          }

          #modal .modal-contenu {
              display: block !important;
              position: relative !important;

              width: calc(100% - 40px) !important;
              max-width: 520px !important;

              background: white !important;
              padding: 30px !important;
              border-radius: 12px !important;

              z-index: 100000 !important;
          }
          /* Croix de fermeture */

          #modal .fermer {
              position: absolute !important;
              top: 14px !important;
              right: 16px !important;
              left: auto !important;

              width: 36px;
              height: 36px;

              display: flex;
              align-items: center;
              justify-content: center;

              padding: 0;
              border: none !important;
              background: transparent !important;

              color: #c62828 !important;
              font-size: 34px !important;
              font-weight: bold;
              line-height: 1;

              cursor: pointer;
          }


          /* Effet au survol */

          #modal .fermer:hover {
              color: #8b0000 !important;
              transform: scale(1.10);
          }


          /* Laisse la place pour la croix */

          #modal .modal-contenu {
              padding-top: 32px !important;
          }


          /* Bouton fiche centré */

          #modal .ouvrir-fiche {
              display: block !important;

              width: fit-content !important;
              margin: 25px auto 0 auto !important;

              padding: 12px 22px !important;

              background: #1683d8 !important;
              color: white !important;

              border: none !important;
              border-radius: 7px !important;

              font-size: 15px;
              font-weight: bold;

              cursor: pointer;
          }


          /* Survol bouton */

          #modal .ouvrir-fiche:hover {
              background: #0f6fb9 !important;
          }
          .contact-sous-image {
              text-align: center;
              margin: 22px 0 10px;
          }

          .contact-sous-image .btn-contact {
              display: inline-block;
              padding: 12px 28px;

              background: #1683d8;
              color: white;

              border-radius: 7px;

              text-decoration: none;
              font-weight: bold;
              font-size: 16px;
          }

          .contact-sous-image .btn-contact:hover {
              background: #0f6fb9;
          }
          /* ============================================================
             PAGE D'ACCUEIL - HABILLAGE
             ============================================================ */

          .accroche-banc {
              max-width: 820px;
              margin: 15px auto 22px;
              padding: 0 20px;

              text-align: center;

              font-size: 20px;
              line-height: 1.55;

              color: #34495a;
          }

          .accroche-banc strong {
              color: #102b40;
          }


          /* ---------- Invitation exploration ---------- */

          .invitation-exploration {
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 7px;

              margin: 12px auto 14px;

              color: #52616d;
              font-size: 15px;
          }

          .invitation-exploration strong {
              color: #1683d8;
          }

          .icone-exploration {
              width: 25px;
              height: 25px;

              display: inline-flex;
              align-items: center;
              justify-content: center;

              border-radius: 50%;

              background: #1683d8;
              color: white;

              font-size: 20px;
              font-weight: bold;
              line-height: 1;
          }


          /* ============================================================
             POINTS + SUR LA PHOTO
             ============================================================ */

          .photo-banc .zone::after {

              content: "+";

              position: absolute;

              top: 50%;
              left: 50%;

              transform: translate(-50%, -50%);

              width: 27px;
              height: 27px;

              display: flex;
              align-items: center;
              justify-content: center;

              border-radius: 50%;

              background: #1683d8;
              color: white;

              font-size: 20px;
              font-weight: bold;
              line-height: 1;

              box-shadow:
                  0 2px 7px rgba(0,0,0,.35);

              transition:
                  transform .2s ease,
                  background .2s ease;
          }

          .photo-banc .zone:hover::after {

              transform:
                  translate(-50%, -50%)
                  scale(1.15);
          }


          /* ============================================================
             3 BENEFICES
             ============================================================ */

          .benefices-banc {

              max-width: 900px;

              margin: 28px auto 0;

              padding: 22px 15px;

              display: grid;

              grid-template-columns:
                  repeat(3, 1fr);

              gap: 10px;

              border-top:
                  1px solid #dce2e7;

              border-bottom:
                  1px solid #dce2e7;
          }


          .benefice {

              display: flex;

              align-items: center;
              justify-content: center;

              gap: 13px;

              padding: 10px 18px;
          }


          .benefice + .benefice {

              border-left:
                  1px solid #dce2e7;
          }


          .benefice-icone {

              width: 46px;
              height: 46px;

              flex: 0 0 46px;

              display: flex;

              align-items: center;
              justify-content: center;

              border-radius: 50%;

              background:
                  rgba(22,131,216,.10);

              color: #1683d8;

              font-size: 24px;
          }


          .benefice h3 {

              margin:
                  0 0 4px;

              color: #102b40;

              font-size: 15px;

              letter-spacing:
                  .6px;
          }


          .benefice p {

              margin: 0;

              color: #606b74;

              font-size: 14px;

              line-height: 1.4;
          }


          /* ============================================================
             PHRASE PEDAGOGIQUE
             ============================================================ */

          .phrase-pedagogique {

              margin:
                  27px auto 20px;

              padding:
                  0 20px;

              text-align: center;

              color: #52616d;

              font-size: 18px;
          }

          .phrase-pedagogique strong {

              color: #102b40;
          }


          /* ============================================================
             BOUTONS
             ============================================================ */

          .actions-banc {

              display: flex;

              justify-content: center;
              align-items: center;

              gap: 14px;

              margin:
                  20px auto 35px;
          }


          .btn-principal,
          .btn-secondaire {

              display: inline-block;

              min-width: 175px;

              padding:
                  12px 24px;

              box-sizing: border-box;

              border-radius: 7px;

              font-family: inherit;
              font-size: 15px;
              font-weight: bold;

              text-align: center;

              cursor: pointer;

              transition:
                  background .2s,
                  border-color .2s,
                  transform .15s;

              text-decoration: none;
          }


          .btn-principal {

              border:
                  1px solid #1683d8;

              background:
                  #1683d8;

              color: white;
          }


          .btn-principal:hover {

              background:
                  #0f6fb9;

              border-color:
                  #0f6fb9;

              transform:
                  translateY(-1px);
          }


          .btn-secondaire {

              border:
                  1px solid #1683d8;

              background:
                  white;

              color:
                  #1683d8;
          }


          .btn-secondaire:hover {

              background:
                  #f0f7fc;

              transform:
                  translateY(-1px);
          }


          /* ============================================================
             SMARTPHONE
             ============================================================ */

          @media (max-width: 700px) {

              .accroche-banc {

                  margin-top: 12px;

                  font-size: 17px;
              }


              .invitation-exploration {

                  padding: 0 15px;

                  font-size: 14px;

                  text-align: center;
              }


              .invitation-exploration span:last-child {

                  display: none;
              }


              .benefices-banc {

                  grid-template-columns: 1fr;

                  margin-top: 20px;

                  padding:
                      12px 20px;
              }


              .benefice {

                  justify-content:
                      flex-start;

                  padding:
                      14px 10px;
              }


              .benefice + .benefice {

                  border-left: none;

                  border-top:
                      1px solid #dce2e7;
              }


              .phrase-pedagogique {

                  font-size: 16px;
              }


              .actions-banc {

                  flex-direction:
                      column;

                  padding:
                      0 20px;
              }


              .btn-principal,
              .btn-secondaire {

                  width: 100%;

                  max-width: 320px;
              }

          }
          /* =========================================================
             SMARTPHONE / ÉCRAN TACTILE
             Affichage permanent des zones cliquables
             ========================================================= */

             @media (hover: none), (pointer: coarse) {

                 .photo-banc .zone::after {
                     content: "+";

                     position: absolute;
                     top: 5px;
                     right: 5px;

                     width: 24px;
                     height: 24px;

                     display: flex;
                     align-items: center;
                     justify-content: center;

                     border-radius: 50%;

                     background: #1683d8;
                     color: white;

                     font-size: 20px;
                     font-weight: bold;
                     line-height: 1;

                     box-shadow: 0 1px 4px rgba(0,0,0,.3);
                 }

             }

/* =========================================================
   PAGE CONTACT
   ========================================================= */

.contact-page {
    max-width:650px;
    margin:40px auto;
    padding:35px;
    background:white;
    border:1px solid #d5d9dd;
    border-radius:14px;
    box-sizing:border-box;
}

.contact-page h1 {
    margin-top:0;
    text-align:center;
    color:#102b40;
}

.contact-intro {
    text-align:center;
    color:#555c64;
    margin-bottom:30px;
    line-height:1.5;
}

.champ {
    margin-bottom:18px;
}

.champ label {
    display:block;
    margin-bottom:6px;
    font-weight:bold;
    color:#263746;
}

.champ input,
.champ textarea {
    width:100%;
    padding:11px;
    border:1px solid #bfc5ca;
    border-radius:6px;
    font-family:inherit;
    font-size:16px;
    box-sizing:border-box;
}

.champ textarea {
    min-height:160px;
    resize:vertical;
}

.obligatoire {
    color:#c62828;
}

.actions {
    text-align:center;
    margin-top:25px;
}

.btn-envoyer {
    padding:12px 28px;
    border:none;
    border-radius:7px;
    background:#1683d8;
    color:white;
    font-weight:bold;
    font-size:16px;
    cursor:pointer;
}

.btn-envoyer:hover {
    background:#0f6fb9;
}

.retour {
    display:block;
    text-align:center;
    margin-top:22px;
    color:#3678b8;
    text-decoration:none;
}

.retour:hover {
    text-decoration:underline;
}

.message-ok {
    padding:20px;
    background:#edf7ed;
    border:1px solid #a5d6a7;
    border-radius:7px;
    text-align:center;
    color:#285b2a;
}

.message-erreur {
    padding:14px;
    background:#fff0f0;
    border:1px solid #e0aaaa;
    border-radius:7px;
    margin-bottom:20px;
    color:#8b2020;
}

/* Honeypot anti-spam */
.website-field {
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
}

@media (max-width:700px) {

    .contact-page {
        margin:15px;
        padding:25px 20px;
    }

}