/* ==========================================================================
   L'Atelier de Pixel — page devis
   Monde : épreuve d'atelier (papier blanc, traits de coupe, zones cotées).
   ========================================================================== */

:root {
    --violet: #553c8f;
    --violet-fonce: #3e2b6b;
    --violet-pale: #f1edf8;
    --saumon: #eb6357;
    --saumon-texte: #c23d31;   /* saumon assombri : texte AA sur blanc */
    --orange: #f6a049;
    --orange-pale: #fef1e4;
    --rouge: #e51223;
    --rouge-texte: #b00d1b;
    --blanc: #ffffff;
    --encre: #1b1726;
    --encre-2: #4a4458;        /* texte secondaire, teinté violet */
    --filet: #ddd8e6;
    --filet-fort: #b9b2c8;
    --fond-doux: #f8f7fb;

    --f-titre: "Barlow Condensed", "Arial Narrow", sans-serif;
    --f-texte: "Nunito", system-ui, sans-serif;

    --gouttiere: clamp(16px, 4vw, 48px);
    --max: 1240px;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --r: 6px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--blanc);
    color: var(--encre);
    font-family: var(--f-texte);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
picture { display: block; }

h1, h2, h3, h4 {
    font-family: var(--f-titre);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
    color: var(--encre);
}

p { margin: 0; }

a { color: var(--violet); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--violet-fonce); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
    position: absolute; left: 16px; top: -60px; z-index: 50;
    background: var(--violet); color: var(--blanc); padding: 10px 16px; border-radius: var(--r);
}
.skip:focus { top: 16px; color: var(--blanc); }

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

.bouton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 999px;
    font-family: var(--f-titre);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    border: 2px solid var(--violet);
    transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
    cursor: pointer;
}
.bouton:hover { text-decoration: none; transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }
.bouton--plein { background: var(--violet); color: var(--blanc); }
.bouton--plein:hover { background: var(--violet-fonce); border-color: var(--violet-fonce); color: var(--blanc); }
.bouton--trait { background: transparent; color: var(--violet); }
.bouton--trait:hover { background: var(--violet-pale); color: var(--violet-fonce); }
.bouton-meta {
    font-family: var(--f-texte);
    font-size: .8rem;
    font-weight: 600;
    opacity: .8;
}

/* ------------------------------------------------------------------ Bandeau */

.bandeau { background: var(--encre); color: var(--blanc); }

.barre-controle { display: grid; grid-template-columns: 4fr 3fr 2fr 1fr; height: 6px; }
.barre-controle i:nth-child(1) { background: var(--violet); }
.barre-controle i:nth-child(2) { background: var(--saumon); }
.barre-controle i:nth-child(3) { background: var(--orange); }
.barre-controle i:nth-child(4) { background: var(--rouge); }

.bandeau-texte {
    max-width: var(--max);
    margin: 0 auto;
    padding: 10px var(--gouttiere);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 20px;
    font-size: .95rem;
    text-align: center;
}
.bandeau-texte a { color: var(--orange); font-weight: 700; }
.bandeau-texte a:hover { color: var(--blanc); }

/* ------------------------------------------------------------------ En-tête */

.entete {
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px var(--gouttiere);
    display: flex;
    align-items: center;
    gap: 32px;
}
.entete-logo img { width: 168px; height: auto; }
.entete-nav { display: flex; gap: 28px; margin-left: auto; }
.entete-nav a {
    font-family: var(--f-titre);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--encre);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.entete-nav a:hover { border-bottom-color: var(--saumon); color: var(--encre); }
.entete-cta { min-height: 44px; padding: 8px 20px; font-size: 1.1rem; }

@media (max-width: 880px) {
    .entete-nav { display: none; }
    .entete { justify-content: space-between; }
    .entete-logo img { width: 140px; }
}
@media (max-width: 420px) {
    .entete-cta { padding: 8px 16px; font-size: 1rem; }
    .entete-logo img { width: 120px; }
}

/* ------------------------------------------------------------------ Ouverture */

.ouverture {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(24px, 5vw, 64px) var(--gouttiere) clamp(8px, 2vw, 24px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
}

.ouverture h1 {
    font-size: clamp(2.75rem, 6.4vw, 5.4rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -0.02em;
    color: var(--violet);
}

.chapo {
    margin-top: 24px;
    max-width: 52ch;
    font-size: clamp(1.08rem, 1.4vw, 1.22rem);
    color: var(--encre-2);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.faits {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--filet);
}
.faits li {
    padding: 16px 16px 0 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--encre-2);
}
.faits li + li { padding-left: 16px; border-left: 1px solid var(--filet); }
.faits strong { display: block; color: var(--encre); font-family: var(--f-titre); font-size: 1.15rem; font-weight: 700; margin-bottom: 2px; }

/* La planche : feuille d'épreuve avec traits de coupe */

.planche { margin: 0; position: relative; }

.planche-feuille {
    position: relative;
    padding: 28px 28px 20px;
    background: var(--blanc);
    border: 1px solid var(--filet);
}

/* Traits de coupe aux quatre coins, hors de la feuille */
.planche-feuille::before,
.planche-feuille::after {
    content: "";
    position: absolute;
    inset: -14px;
    pointer-events: none;
    background:
        linear-gradient(var(--encre), var(--encre)) left 14px top 0 / 1px 10px,
        linear-gradient(var(--encre), var(--encre)) left 0 top 14px / 10px 1px,
        linear-gradient(var(--encre), var(--encre)) right 14px top 0 / 1px 10px,
        linear-gradient(var(--encre), var(--encre)) right 0 top 14px / 10px 1px,
        linear-gradient(var(--encre), var(--encre)) left 14px bottom 0 / 1px 10px,
        linear-gradient(var(--encre), var(--encre)) left 0 bottom 14px / 10px 1px,
        linear-gradient(var(--encre), var(--encre)) right 14px bottom 0 / 1px 10px,
        linear-gradient(var(--encre), var(--encre)) right 0 bottom 14px / 10px 1px;
    background-repeat: no-repeat;
}
.planche-feuille::after { display: none; }

/* Repère d'impression centré en haut */
.repere {
    position: absolute;
    left: 50%;
    top: -22px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border: 1px solid var(--encre);
    border-radius: 50%;
    background:
        linear-gradient(var(--encre), var(--encre)) center / 1px 26px no-repeat,
        linear-gradient(var(--encre), var(--encre)) center / 26px 1px no-repeat;
    background-clip: border-box;
    overflow: visible;
}

.planche-vues {
    position: relative;
    perspective: 1600px;
    aspect-ratio: 480 / 550;
}

.vue {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .9s var(--ease);
    transform-style: preserve-3d;
}
.vue picture, .vue img { width: 100%; height: 100%; object-fit: contain; }
.vue--dos { transform: rotateY(180deg); }
.planche-vues[data-face="dos"] .vue--face { transform: rotateY(-180deg); }
.planche-vues[data-face="dos"] .vue--dos { transform: rotateY(0); }

.cotes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.cote-zone {
    fill: rgba(235, 99, 87, .12);
    stroke: var(--saumon);
    stroke-width: 2.5;
    stroke-dasharray: 8 6;
    vector-effect: non-scaling-stroke;
}
.cote-ligne {
    fill: none;
    stroke: var(--orange);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.etiquette {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: inline-flex;
    flex-direction: column;
    padding: 6px 10px;
    background: var(--blanc);
    border: 1px solid var(--saumon);
    border-radius: var(--r);
    font-family: var(--f-titre);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--encre);
    white-space: nowrap;
    box-shadow: 0 6px 18px -8px rgba(27, 23, 38, .35);
}
.etiquette b { font-weight: 600; font-size: .85rem; color: var(--saumon-texte); }

/* Tracé des zones au premier affichage : le geste du marquage */
@media (prefers-reduced-motion: no-preference) {
    .js .planche:not(.est-tracee) .cote-zone { stroke-dashoffset: 400; opacity: 0; }
    .js .planche:not(.est-tracee) .etiquette { opacity: 0; transform: translateY(6px); }
    .js .planche .cote-zone { transition: stroke-dashoffset 1.4s var(--ease), opacity .4s; }
    .js .planche .etiquette { transition: opacity .5s var(--ease) .6s, transform .5s var(--ease) .6s; }
    .js .planche .etiquette--manche { transition-delay: .8s; }
}

.planche-legende {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--filet);
    font-family: var(--f-titre);
    font-size: 1.15rem;
    font-weight: 600;
}
.planche-legende strong { color: var(--violet); font-size: 1.4rem; }

.bascule {
    display: inline-flex;
    margin: 20px auto 0;
    padding: 4px;
    border: 1px solid var(--filet-fort);
    border-radius: 999px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.bascule button {
    min-width: 88px;
    min-height: 40px;
    padding: 6px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--encre);
    font-family: var(--f-titre);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.bascule button[aria-pressed="true"] { background: var(--encre); color: var(--blanc); }
.bascule button:hover:not([aria-pressed="true"]) { background: var(--violet-pale); }

@media (max-width: 900px) {
    .ouverture { grid-template-columns: 1fr; }
    .planche { max-width: 460px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) {
    .faits { grid-template-columns: 1fr; }
    .faits li { padding: 12px 0; }
    .faits li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--filet); }
    .planche-feuille { padding: 16px 16px 14px; }
    .etiquette { font-size: .9rem; padding: 4px 8px; }
    .etiquette b { font-size: .78rem; }
}

/* ------------------------------------------------------------------ Sections */

.section {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(64px, 9vw, 120px) var(--gouttiere) 0;
}

.section-tete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 48px;
    align-items: end;
    padding-bottom: 28px;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--encre);
}
.section-tete h2 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; color: var(--violet); }
.section-tete p { color: var(--encre-2); max-width: 56ch; }
@media (max-width: 760px) { .section-tete { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Produits */

.planche-produits {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    border-top: 1px solid var(--filet);
    border-left: 1px solid var(--filet);
}

.produit {
    position: relative;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--filet);
    border-bottom: 1px solid var(--filet);
    padding: 24px;
}
/* Petite croix de repère à chaque intersection */
.produit::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 11px;
    height: 11px;
    background:
        linear-gradient(var(--filet-fort), var(--filet-fort)) center / 1px 100% no-repeat,
        linear-gradient(var(--filet-fort), var(--filet-fort)) center / 100% 1px no-repeat;
    z-index: 1;
}

.produit--polos { grid-column: span 7; }
.produit--sweat { grid-column: span 5; }
.produit--trait { grid-column: span 4; }

.produit h3 { font-size: 2rem; font-weight: 700; }
.produit-texte { margin-top: auto; padding-top: 20px; }
.produit--trait .produit-texte { margin-top: 0; }
.produit--trait .produit-visuel { min-height: 240px; }

.zones {
    margin-top: 6px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--saumon-texte);
}

.prix-liste { margin: 16px 0 0; display: grid; gap: 0; }
.prix-liste div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px dashed var(--filet-fort);
}
.prix-liste dt { color: var(--encre-2); font-size: .95rem; }
.prix-liste dd {
    margin: 0;
    font-family: var(--f-titre);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--violet);
    white-space: nowrap;
}

.produit-visuel {
    display: grid;
    place-items: center;
    min-height: 260px;
    color: var(--encre);
}

.produit-visuel--duo { display: block; min-height: 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duo img { width: 100%; height: auto; }
.duo--blanc { display: none; }
.produit-visuel--duo[data-teinte="blanc"] .duo--blanc { display: grid; }
.produit-visuel--duo[data-teinte="blanc"] .duo--noir { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .duo { animation: apparition .5s var(--ease); }
}
@keyframes apparition { from { opacity: 0; transform: translateY(8px); } }

.teintes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.teinte {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--filet-fort);
    border-radius: 999px;
    background: var(--blanc);
    font-family: var(--f-texte);
    font-size: .9rem;
    font-weight: 700;
    color: var(--encre);
    cursor: pointer;
}
.teinte::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--filet-fort);
}
.teinte--noir::before { background: #111; }
.teinte--blanc::before { background: #fff; }
.teinte[aria-pressed="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }

.produit-visuel--photo { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 2px; }
.produit-visuel--photo picture { width: 100%; }
.produit-visuel--photo img { width: 100%; height: 380px; object-fit: cover; object-position: 50% 30%; }
.photo-mention {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--encre);
}

/* Dessins au trait */
.dessin { width: 180px; overflow: visible; }
.dessin .trait { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dessin .trait.fin { stroke-width: 1.4; }
.dessin .pointille { stroke-dasharray: 2 4; }
.dessin .zone { fill: rgba(235, 99, 87, .14); stroke: var(--saumon); stroke-width: 1.6; stroke-dasharray: 5 4; }

@media (max-width: 1000px) {
    .produit--polos, .produit--sweat { grid-column: span 12; }
    .produit--trait { grid-column: span 6; }
    .produit--trait:last-child { grid-column: span 12; }
    .produit-visuel--photo img { height: 320px; }
}
@media (max-width: 600px) {
    .produit { padding: 20px 16px; }
    .produit--trait, .produit--trait:last-child { grid-column: span 12; }
    .produit-visuel { min-height: 200px; }
    .dessin { width: 150px; }
}

/* Premium : champ violet plein */
.premium {
    margin-top: 48px;
    padding: clamp(28px, 4vw, 48px);
    background: var(--violet);
    color: var(--blanc);
    border-radius: 2px;
    position: relative;
}
.premium::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--orange) 0 50%, var(--saumon) 50% 80%, var(--rouge) 80%);
}
.premium-tete { display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: end; }
.premium-tete h3 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 800; color: var(--blanc); }
.premium-tete p { color: #e6def5; max-width: 52ch; }
.premium-liste {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .25);
}
.premium-item { padding: 24px 24px 4px 0; }
.premium-item + .premium-item { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .25); }
.premium-item .dessin { width: 120px; color: var(--blanc); margin-bottom: 16px; }
.premium-item .dessin .zone { fill: rgba(246, 160, 73, .2); stroke: var(--orange); }
.premium-item h4 { font-size: 1.6rem; color: var(--blanc); }
.premium-detail { margin-top: 6px; font-size: .9rem; color: #e6def5; }
.premium-prix { margin-top: 12px; font-size: .95rem; color: #e6def5; }
.premium-prix strong { font-family: var(--f-titre); font-size: 2rem; font-weight: 700; color: var(--orange); }

@media (max-width: 820px) {
    .premium-tete { grid-template-columns: 1fr; }
    .premium-liste { grid-template-columns: 1fr; }
    .premium-item, .premium-item + .premium-item { padding: 20px 0; border-left: 0; }
    .premium-item + .premium-item { border-top: 1px solid rgba(255, 255, 255, .25); }
    .premium-item { display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; }
    .premium-item .dessin { width: 88px; grid-row: span 3; margin: 0; }
}

/* ------------------------------------------------------------------ Simulateur */

.simulateur {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    border: 2px solid var(--encre);
    margin-bottom: 56px;
}
.simulateur[hidden] { display: none; }

.simulateur-choix { padding: clamp(20px, 3vw, 36px); display: grid; gap: 24px; align-content: start; }

.champ { border: 0; margin: 0; padding: 0; min-width: 0; }
.champ > label, .champ > legend {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    font-family: var(--f-titre);
    font-size: 1.3rem;
    font-weight: 700;
}
.champ-aide { font-family: var(--f-texte); font-size: .85rem; font-weight: 600; color: var(--encre-2); margin-left: 6px; }

.champ select, .quantite input {
    width: 100%;
    min-height: 50px;
    padding: 10px 14px;
    border: 1px solid var(--filet-fort);
    border-radius: var(--r);
    background: var(--blanc);
    color: var(--encre);
    font: 600 1.05rem/1.3 var(--f-texte);
}
.champ select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23553c8f' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.zones-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.zones-choix label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1.5px dashed var(--filet-fort);
    border-radius: var(--r);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.zones-choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.zones-choix label:hover { border-color: var(--saumon); }
.zones-choix label:has(input:checked) { border-color: var(--saumon); background: rgba(235, 99, 87, .1); border-style: solid; }
.zones-choix label:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }

.quantite { display: grid; grid-template-columns: 50px 1fr 50px; max-width: 240px; }
.quantite input { text-align: center; border-radius: 0; border-left: 0; border-right: 0; -moz-appearance: textfield; font-size: 1.3rem; font-family: var(--f-titre); font-weight: 700; }
.quantite input::-webkit-inner-spin-button, .quantite input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantite button {
    border: 1px solid var(--filet-fort);
    background: var(--blanc);
    color: var(--violet);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
}
.quantite button:first-child { border-radius: var(--r) 0 0 var(--r); }
.quantite button:last-child { border-radius: 0 var(--r) var(--r) 0; }
.quantite button:hover { background: var(--violet-pale); }

.ticket {
    padding: clamp(20px, 3vw, 36px);
    background: var(--fond-doux);
    border-left: 2px solid var(--encre);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.echelle { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.echelle li {
    padding: 10px 10px 8px;
    border-radius: var(--r);
    border: 1px solid var(--filet);
    background: var(--blanc);
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.echelle span { display: block; font-size: .78rem; font-weight: 700; color: var(--encre-2); line-height: 1.25; }
.echelle b { display: block; font-family: var(--f-titre); font-size: 1.35rem; font-weight: 700; margin-top: 2px; }
.echelle li.est-actif { background: var(--orange); border-color: var(--orange); }
.echelle li.est-actif span { color: var(--encre); }

.ticket-unitaire {
    font-family: var(--f-titre);
    font-size: clamp(4rem, 8vw, 6rem);
    font-weight: 800;
    line-height: .9;
    color: var(--violet);
    letter-spacing: -0.02em;
}
.ticket-unitaire small { font-size: 1.4rem; font-weight: 700; letter-spacing: 0; color: var(--encre); }
.ticket-total { font-size: 1.05rem; }
.ticket-total strong { font-family: var(--f-titre); font-size: 1.5rem; }
.ticket-conseil { min-height: 1.5em; font-size: .95rem; font-weight: 700; color: var(--saumon-texte); }
.ticket .bouton { align-self: flex-start; margin-top: 4px; }
.ticket-note { font-size: .82rem; color: var(--encre-2); }

@media (prefers-reduced-motion: no-preference) {
    .ticket-unitaire.vient-de-changer { animation: tampon .45s var(--ease); }
}
@keyframes tampon { from { transform: scale(1.06); opacity: .5; } }

@media (max-width: 860px) {
    .simulateur { grid-template-columns: 1fr; }
    .ticket { border-left: 0; border-top: 2px solid var(--encre); }
}

/* ------------------------------------------------------------------ Grille */

.grilles { display: grid; gap: 48px; }
.grille-bloc h3 { font-size: 1.8rem; font-weight: 700; margin-bottom: 12px; }
.grille-bloc--premium h3 { color: var(--violet); }
.grille-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.grille {
    width: 100%;
    border-collapse: collapse;
    font-size: .98rem;
    font-variant-numeric: tabular-nums;
}
.grille thead th {
    position: sticky;
    top: 0;
    background: var(--blanc);
    text-align: left;
    vertical-align: bottom;
    padding: 10px 12px;
    border-bottom: 2px solid var(--encre);
    font-family: var(--f-titre);
    font-size: 1.1rem;
    font-weight: 700;
}
.grille thead .col-palier { text-align: right; width: 14%; }
.palier-qte { display: block; }
.palier-code { display: block; font-family: var(--f-texte); font-size: .75rem; font-weight: 700; color: var(--encre-2); }
.grille tbody { border-bottom: 1px solid var(--filet-fort); }
.grille td, .grille tbody th { padding: 10px 12px; border-top: 1px solid var(--filet); vertical-align: top; }
.grille tbody tr:first-child td, .grille tbody tr:first-child th { border-top: 0; }
.grille-article { text-align: left; font-family: var(--f-titre); font-size: 1.2rem; font-weight: 700; width: 30%; }
.grille-article span { display: block; font-family: var(--f-texte); font-size: .85rem; font-weight: 600; color: var(--encre-2); }
.grille-perso { color: var(--encre-2); }
.grille-prix { text-align: right; font-weight: 700; white-space: nowrap; }
.grille .est-palier { background: var(--orange-pale); }
.grille thead .est-palier { background: var(--orange); }
.grille tr.est-choisi td { background: rgba(235, 99, 87, .1); }
.grille tr.est-choisi td.est-palier { background: var(--orange); }

@media (max-width: 640px) {
    .grille thead { display: none; }
    .grille, .grille tbody, .grille tr, .grille td, .grille th { display: block; width: 100%; }
    .grille tbody { padding: 12px 0; }
    .grille-article { padding: 4px 0 8px; border: 0; }
    .grille tr { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 0; border-top: 1px solid var(--filet); }
    .grille tr:first-child { border-top: 0; }
    .grille tr > th { grid-column: 1 / -1; }
    .grille td { border: 0; padding: 2px 0; }
    .grille-perso { grid-column: 1 / -1; font-weight: 700; color: var(--encre); }
    .grille-prix { text-align: left; }
    .grille-prix::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700; color: var(--encre-2); }
}

/* ------------------------------------------------------------------ Devis */

.devis {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
}
.devis-intro h2 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; color: var(--violet); }
.devis-intro > p { margin-top: 16px; color: var(--encre-2); }
.devis-logo {
    margin-top: 32px;
    padding: 24px;
    border: 1.5px dashed var(--saumon);
    border-radius: var(--r);
}
.devis-logo h3 { font-size: 1.5rem; }
.devis-logo ul { margin: 10px 0 12px; padding-left: 20px; }
.devis-logo li { margin: 4px 0; }
.devis-logo p { font-size: .92rem; color: var(--encre-2); }
.devis-alt { margin-top: 24px; font-weight: 600; }
.devis-indispo { padding: 24px; border: 1px solid var(--filet-fort); }

@media (max-width: 900px) { .devis { grid-template-columns: 1fr; } }

/* Formulaire du plugin, habillé aux couleurs de l'atelier */
.devis .cfp-form-wrapper {
    max-width: none;
    margin: 0;
    padding: clamp(20px, 3vw, 36px);
    border: 2px solid var(--encre);
    border-radius: 0;
    box-shadow: none;
    background: var(--blanc);
    font-family: var(--f-texte);
}
.devis .cfp-form-row { gap: 0 20px; }
.devis .cfp-form-group { margin-bottom: 20px; }
.devis .cfp-form-group label,
.devis .cfp-label {
    font-family: var(--f-titre);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--encre);
    margin-bottom: 6px;
}
.devis .cfp-required > label::after { color: var(--rouge-texte); }
.devis .cfp-form-group input,
.devis .cfp-form-group select,
.devis .cfp-form-group textarea {
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--filet-fort);
    border-radius: var(--r);
    font-size: 1rem;
    color: var(--encre);
    background-color: var(--blanc);
}
.devis .cfp-form-group input::placeholder,
.devis .cfp-form-group textarea::placeholder { color: #6b6578; }
.devis .cfp-form-group input:focus,
.devis .cfp-form-group select:focus,
.devis .cfp-form-group textarea:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(85, 60, 143, .18);
}
.devis .cfp-form-group .cfp-error { border-color: var(--rouge-texte); background: #fff6f6; }
.devis .cfp-field-error { color: var(--rouge-texte); font-weight: 700; font-size: .88rem; }
.devis .cfp-form-hint { color: var(--encre-2); font-size: .85rem; }
.devis .cfp-form-group textarea { min-height: 128px; }

.devis .cfp-dropzone {
    min-height: 112px;
    border: 1.5px dashed var(--saumon);
    background: rgba(235, 99, 87, .04);
    color: var(--encre);
}
.devis .cfp-dropzone strong { color: var(--violet); }
.devis .cfp-dropzone:hover,
.devis .cfp-dropzone.is-over,
.devis .cfp-dropzone:focus-within { border-color: var(--violet); background: var(--violet-pale); }
.devis .cfp-dropzone:focus-within { outline: 3px solid var(--orange); outline-offset: 2px; }
.devis .cfp-file { border-color: var(--filet); }
.devis .cfp-file-remove { color: var(--rouge-texte); font-weight: 700; }

.devis .cfp-checkbox label { font-family: var(--f-texte); font-size: .92rem; font-weight: 600; }
.devis .cfp-checkbox input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--violet); }
.devis .cfp-checkbox a { color: var(--violet); text-decoration: underline; }

.devis .cfp-submit-btn {
    width: 100%;
    min-height: 54px;
    border-radius: 999px;
    background: var(--violet);
    font-family: var(--f-titre);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.devis .cfp-submit-btn:hover:not(:disabled) { background: var(--violet-fonce); }
.devis .cfp-submit-btn:disabled { background: #8a7fa6; opacity: 1; }
.devis .cfp-recaptcha-notice { color: var(--encre-2); }
.devis .cfp-recaptcha-notice a { color: var(--encre-2); }

.devis .cfp-alert { border-radius: var(--r); border-left: 0; border: 1.5px solid; font-weight: 600; }
.devis .cfp-alert-success { background: #eef8f0; color: #17562a; border-color: #2e8b4a; }
.devis .cfp-alert-error { background: #fff3f3; color: var(--rouge-texte); border-color: var(--rouge-texte); }
.devis .cfp-alert ul { margin: 8px 0 0 20px; padding: 0; font-weight: 400; color: var(--encre); }

/* Champ rempli par le simulateur */
@media (prefers-reduced-motion: no-preference) {
    .devis .est-prerempli { animation: prerempli 1.6s var(--ease); }
}
@keyframes prerempli { 0%, 30% { background-color: var(--orange-pale); border-color: var(--orange); } }

/* ------------------------------------------------------------------ Catalogue PDF */

.catalogue {
    max-width: var(--max);
    margin: clamp(64px, 9vw, 120px) auto 0;
    padding: 0 var(--gouttiere);
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(24px, 5vw, 64px);
    align-items: center;
}
.catalogue-couverture {
    display: block;
    transform: rotate(-3deg);
    box-shadow: 0 18px 40px -18px rgba(27, 23, 38, .45);
    transition: transform .4s var(--ease);
    border: 1px solid var(--filet);
}
.catalogue-couverture:hover { transform: rotate(0) translateY(-4px); }
.catalogue h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.catalogue p { margin: 12px 0 24px; color: var(--encre-2); max-width: 52ch; }
.catalogue-texte { padding: 32px 0; border-top: 2px solid var(--encre); border-bottom: 1px solid var(--filet); }
@media (max-width: 640px) {
    .catalogue { grid-template-columns: 1fr; }
    .catalogue-couverture { width: 160px; margin: 0 auto; }
}

/* ------------------------------------------------------------------ Livraison */

.livraison-corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}
.modes { list-style: none; margin: 0; padding: 0; }
.modes li { padding: 24px 0; border-top: 1px solid var(--filet); }
.modes li:first-child { border-top: 0; padding-top: 0; }
.modes h3 { font-size: 1.8rem; }
.modes p { margin-top: 6px; color: var(--encre-2); }
.modes strong { color: var(--encre); }

.carte { margin: 0; }
.carte svg { width: 100%; max-width: 420px; margin: 0 auto; overflow: visible; }
.carte-trajets path { fill: none; stroke: var(--filet-fort); stroke-width: 1.5; stroke-dasharray: 4 6; }
.carte-ville circle { fill: var(--saumon); }
.carte-ville text, .carte-atelier text { font-family: var(--f-titre); font-size: 22px; font-weight: 700; fill: var(--encre); }
.carte-atelier .carte-halo { fill: none; stroke: var(--violet); stroke-width: 1.5; }
.carte-atelier path { stroke: var(--violet); stroke-width: 1.5; }
.carte-atelier circle:not(.carte-halo) { fill: var(--violet); }
.carte-atelier text { fill: var(--violet); }
.carte-atelier .carte-sous { font-family: var(--f-texte); font-size: 15px; font-weight: 600; fill: var(--encre-2); }
.carte figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin-top: 16px; font-size: .85rem; color: var(--encre-2); }
.pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.pastille--atelier { background: var(--violet); }
.pastille--livree { background: var(--saumon); margin-left: 8px; }

@media (prefers-reduced-motion: no-preference) {
    .carte-atelier .carte-halo { animation: halo 2.8s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes halo { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

@media (max-width: 820px) { .livraison-corps { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Contact */

.contact {
    margin-top: clamp(64px, 9vw, 120px);
    padding: clamp(48px, 7vw, 96px) var(--gouttiere);
    background: var(--encre);
    color: var(--blanc);
    position: relative;
}
.contact::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--violet) 0 40%, var(--saumon) 40% 70%, var(--orange) 70% 90%, var(--rouge) 90%);
}
.contact h2 { max-width: var(--max); margin: 0 auto; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; color: var(--blanc); }
.contact-liste {
    max-width: var(--max);
    margin: 40px auto 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .2);
}
.contact-liste li { padding: 24px 24px 0 0; min-width: 0; }
.contact-liste li + li { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .2); }
.contact-type { display: block; font-size: .85rem; font-weight: 700; color: var(--orange); text-transform: none; }
.contact-liste a {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--f-titre);
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--blanc);
    text-decoration: none;
    overflow-wrap: anywhere;
    border-bottom: 2px solid var(--saumon);
}
.contact-liste a:hover { color: var(--orange); border-bottom-color: var(--orange); }
@media (max-width: 820px) {
    .contact-liste { grid-template-columns: 1fr; }
    .contact-liste li, .contact-liste li + li { padding: 20px 0; border-left: 0; }
    .contact-liste li + li { border-top: 1px solid rgba(255, 255, 255, .2); }
}

/* ------------------------------------------------------------------ Pied */

.pied {
    padding: 24px var(--gouttiere) 32px;
    background: var(--encre);
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #c9c4d4;
    font-size: .88rem;
    text-align: center;
    display: grid;
    gap: 6px;
}
.pied a { color: #e6def5; }
.pied a:hover { color: var(--blanc); }