/* =========================================================================
   isleden.pro — feuille de style
   Charte alignée sur isleden.com : bleu marine #16324f, orange #ed8e00,
   sans-serif proche de Montserrat, coins arrondis, cartes blanches sur fond
   gris clair, ombres discrètes.
   Police : Montserrat si elle est installée (auto-hébergement à prévoir),
   sinon repli système — aucun appel réseau.
   ========================================================================= */

:root {
    --bg:          #f4f6f9;
    --surface:     #ffffff;
    --surface-alt: #f8fafc;

    --ink:         #1f2a37;
    --ink-soft:    #5b6672;
    --line:        #e2e7ee;

    --brand:       #1e5aa0;   /* bleu Isleden — liens, actions */
    --brand-dark:  #16324f;   /* barre de navigation, titres */
    --accent:      #ed8e00;   /* orange Isleden — CTA, actif, « PRO » */
    --accent-dark: #c87500;

    --ok:          #2f7a3d;
    --danger:      #b42318;
    --info:        #1e5aa0;
    --accompagne:  #8a2b06;   /* bandeau mode accompagné — volontairement à part */

    --radius:      10px;
    --radius-sm:   6px;
    --shadow:      0 1px 2px rgba(16, 42, 67, .06), 0 10px 28px -14px rgba(16, 42, 67, .22);
    --shadow-sm:   0 1px 2px rgba(16, 42, 67, .08);

    --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
            Roboto, Helvetica, Arial, sans-serif;

    --shell: 72rem;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* --- Barre de navigation (claire — logo bleu sur fond clair) ------------- */

.topbar {
    background: var(--surface);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* En-tête sur deux rangées : logo centré (rangée 1), navigation centrée
   (rangée 2), zone utilisateur ancrée à droite de la rangée 1. */
.topbar__inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: .6rem 1.25rem .35rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    row-gap: .35rem;
}

.brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__img { height: 44px; width: auto; display: block; }
.brand__mark { height: 32px; width: auto; display: block; }
.brand__tag {
    align-self: center;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-dark);
    background: rgba(237, 142, 0, .16);
    padding: .12rem .5rem;
    border-radius: 999px;
}
.brand__word {
    font-weight: 700;
    font-size: 1.28rem;
    letter-spacing: -.01em;
    color: var(--brand);
}
.brand__pro {
    font-weight: 700;
    font-size: 1.28rem;
    letter-spacing: .04em;
    color: var(--accent);
    margin-left: .12rem;
}

.topbar__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .15rem .25rem;
    padding-top: .15rem;
    border-top: 1px solid var(--line);
    margin-top: .1rem;
}

.topbar__nav a {
    display: inline-block;
    white-space: nowrap;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-weight: 600;
    font-size: .92rem;
}
.topbar__nav a:hover {
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
}
.topbar__nav a.is-active {
    color: var(--brand);
    background: var(--surface-alt);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.topbar__user {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .88rem;
}
.topbar__user .who { color: var(--ink-soft); white-space: nowrap; }
.topbar__user .logout {
    color: var(--brand);
    border: 1px solid var(--line);
    padding: .32rem .7rem;
    border-radius: var(--radius-sm);
}
.topbar__user .logout:hover { background: var(--surface-alt); text-decoration: none; }

.chip {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: rgba(237, 142, 0, .16);
    color: var(--accent-dark);
}

/* --- Bandeau mode accompagné ------------------------------------------------ */

.mode-accompagne {
    background: var(--accompagne);
    color: #fff;
    padding: .7rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    align-items: center;
    justify-content: space-between;
    font-size: .92rem;
}
.mode-accompagne .inner {
    max-width: var(--shell);
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    align-items: center;
    justify-content: space-between;
}
.mode-accompagne form { margin: 0; }
.mode-accompagne button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
    color: #fff;
}
.mode-accompagne button:hover { background: rgba(255, 255, 255, .14); }

/* --- Coquille de contenu -------------------------------------------------- */

.shell {
    max-width: var(--shell);
    margin: 2.25rem auto 4rem;
    padding: 0 1.25rem;
}

h1 {
    margin: 0 0 1.25rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-dark);
    letter-spacing: -.01em;
}
h2 {
    margin: 2.25rem 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-dark);
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--line);
}
h3 { margin: 1.5rem 0 .75rem; font-size: 1rem; font-weight: 700; }

p { margin: 0 0 1rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Lien de retour en tête d'écran : <p><a href>← …</a></p> */
.shell > p > a[href]:first-child:only-child { font-weight: 600; }

/* --- Cartes ------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.4rem;
    margin: 0 0 1.25rem;
}
.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* --- Listes de navigation interne (espace entreprise) ------------------- */

.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { margin: 0; }
.linklist li + li { border-top: 1px solid var(--line); }
.linklist a {
    display: block;
    padding: .6rem .2rem;
    font-weight: 600;
}

/* --- Tableaux --------------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25rem;
    font-size: .93rem;
    background: var(--surface);
}
th, td {
    text-align: left;
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
thead th {
    color: var(--brand-dark);
    font-weight: 700;
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}
tbody tr:hover { background: var(--surface-alt); }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Totaux en pied de tableau (vue 360, devis…) */
table .tot td, table.tot td { font-weight: 700; }
table.tot { width: auto; min-width: 18rem; margin-left: auto; }

/* --- Formulaires --------------------------------------------------------- */

/* inline-block : un couple libellé + champ se déplace d'un bloc et retombe à
   la ligne proprement quand une rangée en contient plusieurs (barèmes,
   filtres, éditeur de devis). Les écrans qui empilent gardent leur <br>. */
label {
    display: inline-block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin: 0 .6rem .4rem 0;
    vertical-align: top;
}
/* Cases à cocher / boutons radio : libellé normal, aligné sur le contrôle. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    font-weight: 400;
    color: var(--ink);
}
label > input, label > select, label > textarea { margin: .15rem 0 0 .35rem; }
label:has(> input[type="checkbox"]) > input,
label:has(> input[type="radio"]) > input { margin: 0 .4rem 0 0; }

/* Rangée de champs sur une ligne, qui retombe proprement (parametrage, devis). */
.fieldrow, .lineform {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .4rem .9rem;
    margin: 0 0 1rem;
}
.fieldrow label, .lineform label { margin-bottom: 0; }
.fieldrow > button, .lineform > button { align-self: flex-end; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], input[type="url"],
select, textarea {
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .5rem .6rem;
    max-width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(30, 90, 160, .15);
}
textarea { width: 100%; }

/* --- Boutons ----------------------------------------------------------- */

button, .btn, input[type="submit"] {
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
    line-height: 1.2;
}
button:hover, .btn:hover, input[type="submit"]:hover { background: #1a4e8c; text-decoration: none; }

.btn--primary { background: var(--accent); }
.btn--primary:hover { background: var(--accent-dark); }

.btn--ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--brand);
}
.btn--ghost:hover { background: var(--surface-alt); }

/* --- Messages flash --------------------------------------------------------- */

.flash {
    padding: .7rem 1rem;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    margin: 0 0 1rem;
}
.flash-success { border-left-color: var(--ok); }
.flash-error   { border-left-color: var(--danger); }
.flash-info    { border-left-color: var(--info); }

/* --- Page d'accueil ---------------------------------------------------- */

.hero {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 2.4rem 2rem;
    box-shadow: var(--shadow);
}
.hero h1 { font-size: 1.95rem; margin-bottom: .5rem; }
.hero .lead { font-size: 1.05rem; color: var(--ink); max-width: 44rem; }
.hero p { max-width: 44rem; }
.hero .cta { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero .cta .btn { padding: .65rem 1.25rem; }

.section-title { margin-top: 2.5rem; }

.features {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}
.features li {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.features li strong {
    display: block;
    color: var(--brand-dark);
    font-size: 1.02rem;
    margin-bottom: .3rem;
}

/* Étapes numérotées « comment ça marche » */
.steps { counter-reset: step; list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .75rem; max-width: 48rem; }
.steps li {
    position: relative;
    padding: .9rem 1rem .9rem 3.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: .9rem; top: .8rem;
    width: 1.7rem; height: 1.7rem;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    border-radius: 999px; font-weight: 700; font-size: .9rem;
}

.callout {
    margin: 2rem 0 0;
    max-width: 48rem;
    padding: 1.25rem 1.4rem;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* --- Pied de page --------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .85rem;
}
.site-footer .inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}
.site-footer a { color: inherit; }
.site-footer .foot-brand { font-weight: 700; color: var(--brand-dark); }
.site-footer .foot-brand span { color: var(--accent); }

/* --- Réglages écrans étroits ------------------------------------------- */

@media (max-width: 760px) {
    .topbar__inner { grid-template-columns: 1fr auto; column-gap: .5rem; }
    .brand { grid-column: 1; justify-self: start; }
    .brand__img { height: 34px; }
    .topbar__user { grid-column: 2; }
    .topbar__nav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
    .topbar__nav::-webkit-scrollbar { display: none; }
    .shell { margin-top: 1.5rem; }
    .hero { padding: 1.8rem 1.3rem; }
    .hero h1 { font-size: 1.5rem; }
}