@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* police du logo/nom de marque "La Maison du Tapissier" (navbar + bandeau) */
@font-face {
    font-family: 'gawain';
    src: url('index_fichiers/fonts/gawain.ttf');
}

:root {
    --linen: #F4ECE0;
    --linen-2: #EADAC2;
    --card: #FBF6EC;
    --ink: #2B2019;
    --ink-muted: #6B5D50;
    --bordeaux: #6E2A2E;
    --bordeaux-deep: #4E1E21;
    --brass: #A97D3D;
    --brass-light: #D9BD8C;
    --border: #DDCBAE;

    --font-display: 'Cormorant Garamond', Georgia, 'Iowan Old Style', serif;
    --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

html body {
    width: 100%;
    height: 100%;
    background: var(--linen);
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
}

a {
    color: var(--bordeaux);
}

a:hover {
    color: var(--bordeaux-deep);
}

h1 {
    font-style: normal;
    font-weight: 600;
    font-family: var(--font-display);
    font-size: 34px;
}

h4,
h2,
h3 {
    font-weight: 600;
    font-family: var(--font-display);
    font-size: 24px;
    margin-bottom: 8px;
}


.pinkBackground {
    background: var(--linen);
}

.materialBackground {
    background: var(--linen);
}

/* masthead affiché en haut de chaque page : sceau + tissu bordeaux + frange,
   au lieu du simple texte sur fond tuilé */
.titleHeader {
    display: block;
    /* flex-basis en dur en vw (pas %) : sinon la largeur se calcule par
       rapport au .container Bootstrap (qui plafonne selon le breakpoint,
       ex. 1320px) au lieu du viewport, et "width: 100vw" est ignoré car
       flex-basis prime sur width dans un item flex */
    flex: 1 0 100vw;
    position: relative;
    width: 100vw;
    /* Bootstrap 5 impose max-width:100% aux enfants directs de .row
       (règle ".row > *"), ce qui plafonnait la largeur au .container
       (1320px) au lieu du viewport entier sur plan-de-coupe.html */
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 28px;
    padding: 50px 20px 34px;
    background: radial-gradient(ellipse at 50% 15%, rgba(217, 189, 140, .28), transparent 65%), var(--bordeaux);
    color: #1a1a1a;
    font-family: 'gawain', var(--font-display);
    font-weight: 400;
    font-size: 40px;
    text-align: center;
    line-height: 1.15;
    border-bottom: 3px solid var(--brass);
}

.titleHeader::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='none' stroke='%23A97D3D' stroke-width='1.4'/%3E%3Ccircle cx='32' cy='32' r='25' fill='none' stroke='%23A97D3D' stroke-width='0.6' stroke-dasharray='1,3.4'/%3E%3Ccircle cx='32' cy='32' r='13' fill='%23A97D3D' stroke='%23D9BD8C' stroke-width='1.4'/%3E%3Cpath d='M24,24 A11.5,11.5 0 0 1 42,25' fill='none' stroke='%23D9BD8C' stroke-width='2' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E");
}

.titleHeader .flourish {
    display: inline-block;
    width: 30px;
    height: 13px;
    vertical-align: middle;
    margin: 0 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='14' viewBox='0 0 34 14'%3E%3Cpath d='M0,7 C10,7 12,1 17,1 M17,1 C13,1 13,7 17,7' fill='none' stroke='%23D9BD8C' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='7' r='2.4' fill='%23D9BD8C'/%3E%3C/svg%3E");
}

.titleHeader .flourish-r {
    transform: scaleX(-1);
}

/* sur petit écran, "La Maison du tapissier" + les fioritures ne tiennent
   pas sur une ligne à 40px : ça retombe à la ligne au milieu du titre.
   On réduit la taille pour que tout reste sur une seule ligne, centré. */
@media (max-width: 576px) {
    /* gawain est plus large par caractère que Cormorant Garamond, il faut
       une taille plus réduite pour tenir sur une seule ligne en mobile */
    .titleHeader {
        font-size: 19px;
        padding: 40px 10px 24px;
    }

    .titleHeader::before {
        width: 52px;
        height: 52px;
    }

    .titleHeader .flourish {
        width: 14px;
        height: 6px;
        margin: 0 3px;
    }

    .navbar-brand {
        font-size: 15px;
    }
}

/* variante page d'accueil : le bandeau se prolonge en .heroLead juste en
   dessous (texte de présentation), donc pas de frange ici, elle passe
   sur .heroLead à la place */
.titleHeader.has-lead {
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: none;
}

.heroLead {
    flex: 1 0 100vw;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 28px;
    padding: 0 20px 34px;
    background: var(--bordeaux);
    color: var(--linen);
    text-align: center;
    border-bottom: 3px solid var(--brass);
}

.heroLead .lead-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 20px;
    color: var(--brass-light);
    max-width: 56ch;
    margin: 0 auto 14px;
}

.heroLead p {
    max-width: 56ch;
    margin: 0 auto 8px;
    color: #E2CFC0;
    font-size: 15px;
}

/* barre décorative d'origine (image590.png) : redondante avec le nouveau
   bandeau ci-dessus, on la retire */
.imgBarre {
    display: none;
}

.navbar {
    margin: auto;
    background-color: var(--ink) !important;
    border-bottom: 3px solid var(--brass);
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 10px;
}

.navbar-brand {
    font-family: 'gawain', var(--font-display);
    font-weight: 400;
    font-size: 23px;
    margin-bottom: 6px;
}

/* la marque occupe toute la ligne, les liens passent systématiquement
   à la ligne suivante (masthead à deux niveaux, plutôt qu'une seule
   barre compacte) */
.navbar-collapse {
    flex-basis: 100%;
    width: 100%;
}

.navbar-dark .navbar-nav .nav-link {
    color: #D9CBBA;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-item.active .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--linen);
    border-bottom-color: var(--brass);
}

.intro,
.tools {
    background: var(--card);
    width: auto;
    padding: 30px;
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 400;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 15px;
}

.tools {
    margin-top: 20px;
    padding: 15px;
}

.txtOutil {
    text-align: justify;
}

.styles {
    font-family: var(--font-display);
}

.siege {
    margin: auto;
}

/* onglets "Les styles" — présentés comme une frise chronologique en
   colonnes : chaque colonne se remplit de haut en bas avant de passer
   à la suivante (grid-auto-flow: column + un nombre de lignes fixe),
   jamais gauche-droite ligne par ligne, sinon la ligne verticale de
   chaque colonne relierait des styles qui ne se suivent pas dans le
   temps. 3 colonnes / 4 lignes sur desktop, 2 colonnes / 6 lignes en
   dessous de 576px (voir media query plus bas). */
.nav-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: 24px;
    row-gap: 2px;
    border-bottom: none;
}

.nav-tabs .nav-item {
    width: 100%;
    border-left: 1px solid var(--border);
}

.nav-tabs .nav-link {
    position: relative;
    display: block;
    color: var(--ink-muted);
    border: none;
    font-family: var(--font-body);
    font-size: 14px;
    padding: 9px 0 9px 16px;
}

/* note complémentaire sous une liste d'onglets (ex: "Mais aussi..." sur
   la page Les outils) : même typo/taille que les libellés d'onglets. */
.tab-note {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink-muted);
    margin-bottom: 32px;
}

.nav-tabs .nav-link::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--border);
}

.nav-tabs .nav-link:hover {
    color: var(--bordeaux);
}

.nav-tabs .nav-link.active {
    color: var(--bordeaux);
    background: transparent;
    font-weight: 600;
}

.nav-tabs .nav-link.active::before {
    background: var(--bordeaux);
    border-color: var(--bordeaux);
}

/* petite barre décorative, courte et centrée, entre la liste d'onglets
   et le contenu affiché en dessous (pages Les styles / Les outils /
   Les techniques) */
.tab-content {
    margin-top: 28px;
}

.tab-content::before {
    content: "";
    display: block;
    width: 380px;
    max-width: 85%;
    height: 2px;
    margin: 0 auto 24px;
    background: var(--border);
}

/* lien affilié Amazon vers un produit (outils / fournitures / techniques) */
.amazon-link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--bordeaux);
    text-decoration: none;
    border-bottom: 1px dotted var(--bordeaux);
    white-space: nowrap;
}

.amazon-link:hover {
    color: var(--ink);
    border-bottom-style: solid;
}

/* couvertures des livres suggérés (page Les styles) */
.book-cover {
    max-width: 140px;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.style-period {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--bordeaux);
    letter-spacing: .02em;
    margin: 4px 0 18px;
}

/* sur petit écran, 3 colonnes seraient trop étroites : on repasse à 2
   colonnes de 6 (même logique de remplissage colonne par colonne). */
@media (max-width: 576px) {
    .nav-tabs {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(6, auto);
        column-gap: 18px;
    }
}

/* page "Les techniques" : 16 étapes au lieu de 12, donc 4 colonnes de 4
   sur desktop (2 colonnes de 8 en dessous de 576px) plutôt que 3x4. */
#techniquesTab {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, auto);
}

@media (max-width: 576px) {
    #techniquesTab {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(9, auto);
    }
}

td,
th {
    border-left: var(--border) solid 1px;
    text-align: center;
    margin: 2px;
}

.td1 {
    font-weight: bold;
    border-left: 0px;
    text-align: left;
}

.underline {
    text-decoration: underline;
}

/* boutons : palette bordeaux / laiton au lieu des gris Bootstrap par défaut */
.btn-dark,
.btn-secondary {
    background-color: var(--bordeaux);
    border-color: var(--bordeaux);
    color: var(--linen);
}

.btn-dark:hover,
.btn-secondary:hover {
    background-color: var(--bordeaux-deep);
    border-color: var(--bordeaux-deep);
    color: var(--linen);
}

.btn-success {
    background-color: var(--brass);
    border-color: var(--brass);
    color: var(--ink);
}

.btn-success:hover {
    background-color: #8f6a34;
    border-color: #8f6a34;
    color: var(--ink);
}

.btn-outline-light {
    color: var(--linen);
    border-color: var(--brass);
}

.btn-outline-light:hover {
    background-color: var(--brass);
    border-color: var(--brass);
    color: var(--ink);
}

.card.bg-dark {
    position: relative;
    background-color: var(--ink) !important;
    border: none;
    border-top: 3px solid var(--brass);
    border-radius: 8px;
    align-items: center;
}

/* petits anneaux laiton aux coins, façon tringle à rideaux */
.card.bg-dark::before,
.card.bg-dark::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brass);
}

.card.bg-dark::before {
    left: -3px;
}

.card.bg-dark::after {
    right: -3px;
}

.card.bg-dark .btn {
    display: block;
    width: calc(100% - 0.5rem);
    margin: 0.5rem auto;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.95rem;
    white-space: normal;
}

/* tableaux : en-tête ink/laiton au lieu du noir Bootstrap */
.table-dark {
    --bs-table-bg: var(--ink);
    --bs-table-color: var(--linen);
    --bs-table-border-color: var(--brass-light);
    background-color: var(--ink);
    color: var(--linen);
}

.table-dark th,
.table-dark td {
    border-color: var(--brass-light);
}

/* plan de coupe : pièces en bordeaux/laiton au lieu du vert Bootstrap par défaut */
.bg-success {
    background-color: var(--bordeaux) !important;
    color: var(--linen) !important;
}

.bg-secondary {
    background-color: var(--bordeaux-deep) !important;
    color: var(--linen) !important;
}

/* résultat du calculateur de métrage : bien visible, pas juste une
   ligne de texte parmi d'autres */
.result-caption {
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brass-light);
}

.result-value {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--linen);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    margin-bottom: 28px;
}

.result-value small {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 400;
    margin-left: 4px;
    color: var(--brass-light);
}

.invalid-border {
    border-color: #dc3545;
}

.no-valid {
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

.form-control-invalid:focus {
    color: var(--ink);
    background-color: #fff;
    border-color: red;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(253 13 57 / 29%);
}

.relative {
    position: relative;
}

.form-control:invalid,
.form-control:valid {
    padding-right: 1.5rem;
}

.vertical-center {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.fs-7 {
    font-size: 0.75rem !important
}