/* =====================================================================
   GestiLoc – feuille responsive (remplace style.css dans layout.html)
   Mobile d'abord. Points de rupture : 700px (tablette), 1000px (bureau)
   Les fragments HTML existants (cell1x, cell2x, text, inset, sponsors…)
   sont repris tels quels : leurs largeurs fixes et flottants sont neutralisés ici.
   ===================================================================== */

:root {
    --vert: #2EB349;
    --orange: #FCAD1A;
    --gris: #444244;
    --olive: #bdc8ba;
    --noir: #000;
    --texte: #333;
    --fond: #f2f2f2;
    --page-max: 1024px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

img { max-width: 100%; height: auto; }

a { color: var(--vert); }
a:hover { color: var(--gris); }

h1, h2, h3 { line-height: 1.25; }

/* ---------- Page ---------- */
.page {
    max-width: var(--page-max);
    margin: 0 auto;
    background: #fff;
    border-top: 6px solid var(--gris);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Bandeau ---------- */
.site-header { position: relative; }

#banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1010 / 235;
    background: url('gestiloc-banner.png') left top / 100% auto no-repeat;
}

#lang-selector {
    position: absolute;
    bottom: 6px;          /* mobile : en bas, pour ne pas masquer le slogan */
    right: 6px;
}
#lang-selector ul {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#lang-selector a {
    display: inline-block;
    min-width: 36px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}
#lang-selector a:hover,
#lang-selector li.active a { background: var(--vert); color: #fff; }

/* ---------- Menu ---------- */
.site-nav { background: var(--noir); }

.nav-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: var(--noir);
    color: #fff;
    font: bold 18px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.burger,
.burger::before,
.burger::after {
    display: block;
    width: 22px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    content: "";
}
.burger { position: relative; }
.burger::before { position: absolute; top: -7px; }
.burger::after  { position: absolute; top: 7px; }

.nav-zone { display: none; }
.nav-zone.is-open { display: block; }

#menu { margin: 0; }
.ulmenu {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
.limenu { border-top: 1px solid #222; }
.limenu a {
    display: block;
    padding: 12px 16px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
}
.limenu:hover,
.limenu a.active { background: var(--vert); }
.limenu:hover a,
.limenu a.active { color: var(--orange); }

/* ---------- Grille principale ---------- */
.layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "main"
        "left"
        "right";
    gap: 16px;
    padding: 12px;
    flex: 1;
}
.col-main  { grid-area: main; min-width: 0; }
.col-left  { grid-area: left; min-width: 0; }
.col-right { grid-area: right; min-width: 0; }

/* Neutralisation des anciennes boîtes à largeur fixe */
.cell1x, .cell1x1, .cell1x2, .cell1x3,
.cell2x, .cell2x1, .cell2x2, .cell2x3,
.cell3x, .cell4x1, .cell1xx {
    width: auto !important;
    height: auto !important;
    margin: 0;
    float: none !important;
}
.left, .right { float: none; }
.clear { clear: both; }

/* ---------- Contenu (.text) ---------- */
.text { padding: 0 4px; }
.text h2 {
    margin: 18px 0 6px;
    font-size: 1.15rem;
    color: var(--gris);
}
.text p { margin: 0 0 10px; }
.text ul { margin: 6px 0 12px; padding-left: 22px; }
.text li { margin: 4px 0; }

quote {
    display: block;
    margin: 12px 0 18px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.3rem;
    line-height: 1.4;
    text-align: center;
    color: var(--gris);
}

/* Encadré "Votre partenaire" */
.inset { margin-top: 20px; }
.inset h1 {
    margin: 0 0 6px;
    color: var(--vert);
    font-size: 1.15rem;
    font-style: italic;
}
.inset p {
    margin: 0;
    padding: 12px;
    background: var(--olive);
    color: var(--gris);
    font-size: .95rem;
    overflow: hidden;     /* contient l'image flottante */
}
.inset img {
    float: left;
    width: 110px;
    margin: 0 12px 6px 0;
}

/* ---------- Colonnes latérales ---------- */
.col-left h3 { margin: 4px 0 10px; color: var(--gris); font-size: 1.05rem; }

.gestimmo1 {
    margin-top: 12px;
    padding: 14px 10px;
    background: var(--vert);
    color: #fff;
    text-align: center;
    font-size: .95rem;
    line-height: 1.6;
}
.gestimmo1 br:first-child,
.gestimmo1 br:first-child + br { display: none; }   /* supprime l'espace vide en tête */

.contact { padding: 10px 0; }
.contact a {
    display: inline-block;
    padding: 8px 22px;
    border-radius: 20px;
    background: var(--gris);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
.contact a:hover { background: #000; color: var(--orange); }

.sponsors h1 {
    margin: 0;
    padding: 6px;
    background: var(--gris);
    color: #fff;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-align: center;
}
.sponsors ul { margin: 6px 0; padding: 0; list-style: none; }
.sponsors li { padding: 3px 0; text-align: center; font-size: .95rem; }
.sponsors a img { display: block; margin: 8px auto; }

.col-right hr { border: 0; border-top: 1px solid #ddd; margin: 16px 0; }
.col-right ul { padding-left: 20px; }
.col-right p { margin: 8px 0; }

/* ---------- Formulaire de contact ---------- */
.w3-container { max-width: 100% !important; margin: 0 auto; }
.w3-input { font-size: 16px !important; }   /* évite le zoom auto sur iOS */
.rgpd-notice { font-size: .85rem; color: #666; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--gris); color: #fff; }
#footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px;
    text-align: center;
    font-size: .9rem;
}
#footer p { margin: 0; }
#footer quote { margin: 0; color: #fff; font-size: inherit; }
#footer .motto { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 1.05rem; }
#footer .legal a { color: #fff; font-weight: bold; text-decoration: none; }
#footer .legal a:hover { color: var(--orange); }

/* ---------- Outils (édition / debug) ---------- */
.edit-btn {
    margin: 4px 0;
    padding: 4px 10px;
    border: 1px solid var(--gris);
    background: #ffd;
    cursor: pointer;
}
.debug {
    max-width: var(--page-max);
    margin: 10px auto;
    padding: 10px;
    background: #fee;
    font: 12px monospace;
    word-break: break-all;
}

/* =====================================================================
   Tablette : 700px et plus
   ===================================================================== */
@media (min-width: 700px) {
    .nav-toggle { display: none; }
    .nav-zone { display: block; }

    .ulmenu { flex-direction: row; }
    .limenu { flex: 1 1 0; border-top: 0; text-align: center; }
    .limenu a { padding: 8px 6px; font-size: 17px; }

    .layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "main main"
            "left right";
        gap: 20px;
        padding: 16px;
    }

    #lang-selector a { font-size: 12px; }

    #footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    #footer .motto { text-align: center; flex: 1; }
}

/* =====================================================================
   Bureau : 1000px et plus (proche de la mise en page d'origine)
   ===================================================================== */
@media (min-width: 1000px) {
    body { font-size: 15px; }
    #lang-selector { top: 6px; bottom: auto; }

    .limenu a { font-size: 26px; padding: 4px 6px; }

    .layout {
        grid-template-columns: 252px 1fr 252px;
        grid-template-areas: "left main right";
        gap: 16px;
        padding: 6px 8px 12px;
    }

    .text { padding: 0 12px; }
    .inset img { width: 130px; }
}