/* Calculateur de pâte, styles de l'outil.
   DA reprise de la ToolBox : fond dégradé violet, conteneur blanc
   arrondi et ombré, cartes blanches. Couleurs d'accent choisies pour un
   contraste texte d'au moins 4,5:1 sur fond blanc ou clair. */

[hidden] { display: none !important; }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
}

.container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.tool-content {
    padding: 20px 0;
    display: grid;
    gap: 20px;
}

/* min-width: 0 sur tout item de grille ou de flex qui contient un
   tableau, un select aux longs libellés ou un long texte, sinon il
   impose sa largeur minimale et fait déborder la page sur mobile. */
.tool-content > *,
.champs-ligne > .champ,
.definitions-grid > *,
.barre-legende > li {
    min-width: 0;
}

.form-control {
    max-width: 100%;
}

.lead {
    font-size: 1.05em;
    line-height: 1.6;
    color: #2c3e50;
    background: #f8f9fa;
    border-left: 4px solid #5b3a7e;
    border-radius: 8px;
    padding: 15px 20px;
}

/* Cartes */
.card {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.card h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3em;
    font-weight: 600;
}

.card h2 i {
    color: #5b3a7e;
}

.card h3 {
    color: #2c3e50;
    margin: 20px 0 10px;
    font-size: 1.1em;
    font-weight: 600;
}

.card p {
    line-height: 1.6;
    margin-bottom: 10px;
}

.card p:last-child {
    margin-bottom: 0;
}

/* Formulaire de l'outil */
.champs-ligne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.champ label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #2c3e50;
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ced4da;
    border-radius: 8px;
    font-size: 14px;
    color: #212529;
    background: #f8f9fa;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.form-control:focus {
    border-color: #5b3a7e;
    background: white;
    outline: 3px solid rgba(91, 58, 126, 0.35);
    outline-offset: 1px;
}

.form-control:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.unite-champ {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #595959;
}

.champ-case {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.champ-aide {
    margin-top: 12px;
    font-size: 13px;
    color: #595959;
}

/* Choix en ligne (radios, cases) */
.choix-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #2c3e50;
    cursor: pointer;
}

.choix-inline input {
    accent-color: #5b3a7e;
    width: 18px;
    height: 18px;
}

.fieldset-mode {
    border: none;
    display: flex;
    gap: 24px;
    margin-bottom: 18px;
    padding: 0;
}

.fieldset-mode legend,
.fieldset-ferment legend,
.fieldset-preferment legend,
.fieldset-sens legend {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    padding: 0;
}

.fieldset-ferment,
.fieldset-preferment {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 16px;
    margin: 18px 0;
}

/* Boutons */
.btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(145deg, #5b3a7e, #43285c);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(91, 58, 126, 0.35);
}

.btn:active {
    transform: translateY(0);
}

.btn-secondaire {
    background: white;
    color: #43285c;
    border: 2px solid #5b3a7e;
}

.btn-secondaire:hover {
    background: #5b3a7e;
    color: white;
}

.actions-partage {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.zone-lien {
    margin-top: 10px;
    font-size: 13px;
    color: #2c3e50;
    background: #f0f6fb;
    border-radius: 8px;
    padding: 10px 14px;
    word-break: break-all;
}

/* Exemples rapides */
.exemples {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.exemples-titre {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.exemple-pate {
    padding: 8px 14px;
    border: 2px solid #5b3a7e;
    border-radius: 20px;
    background: white;
    color: #43285c;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.exemple-pate:hover {
    background: #5b3a7e;
    color: white;
    transform: translateY(-1px);
}

/* Panneau de résultat */
.resultat {
    margin-top: 20px;
    background: #f0f6fb;
    border: 1px solid #cfe3f2;
    border-radius: 10px;
    padding: 20px;
}

.resultat-intro {
    color: #1b5a85;
    font-weight: 600;
    margin: 0 0 12px;
}

.resultat-erreur {
    color: #8a1c1c;
    font-weight: 600;
    margin: 0;
}

.resultat-alerte {
    margin-top: 10px;
    padding: 10px 14px;
    background: #fdf0e3;
    border: 1px solid #f0c896;
    border-radius: 8px;
    color: #7a4a12;
    font-size: 14px;
}

.resultat-note {
    margin-top: 14px;
    font-size: 13px;
    color: #595959;
}

.pesees-etape {
    margin-bottom: 18px;
}

.pesees-etape:last-child {
    margin-bottom: 0;
}

.pesees-etape h3 {
    margin: 0 0 10px;
    font-size: 1em;
    color: #43285c;
}

.resultat-compte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.resultat-compte > div {
    background: white;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.resultat-compte dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #595959;
}

.resultat-compte dd {
    font-size: 1.1em;
    font-weight: 700;
    color: #1b5a85;
    margin: 2px 0 0;
}

/* Barre de composition SVG */
.barre-composition {
    margin-top: 18px;
}

.svg-barre {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    display: block;
}

.seg-farine { fill: #667eea; }
.seg-eau { fill: #2471a3; }
.seg-sel { fill: #764ba2; }
.seg-huile { fill: #e07a3f; }
.seg-sucre { fill: #d9a441; }
.seg-ferment { fill: #43285c; }

/* Pastilles de la légende : même couleur que les segments, en fond
   (fill ne s'applique qu'au SVG). */
.pastille.seg-farine { background: #667eea; }
.pastille.seg-eau { background: #2471a3; }
.pastille.seg-sel { background: #764ba2; }
.pastille.seg-huile { background: #e07a3f; }
.pastille.seg-sucre { background: #d9a441; }
.pastille.seg-ferment { background: #43285c; }

.barre-legende {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    font-size: 13px;
    color: #2c3e50;
}

.barre-legende li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pastille {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

/* Illustration */
.illustration-carte {
    text-align: center;
}

.illustration-pate {
    width: 100%;
    max-width: 420px;
    height: auto;
}

.illustration-legende {
    max-width: 560px;
    margin: 12px auto 0;
    color: #595959;
    font-size: 14px;
}

/* Tableaux */
.table-scroll {
    overflow-x: auto;
    margin-top: 10px;
}

.table-scroll table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 14px;
}

.table-scroll caption {
    caption-side: bottom;
    padding-top: 10px;
    font-size: 12px;
    color: #595959;
    text-align: left;
}

.table-scroll th,
.table-scroll td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.table-scroll thead th {
    background: #2c3e50;
    color: white;
    font-weight: 600;
    white-space: nowrap;
}

.table-scroll tbody th {
    font-weight: 600;
    color: #2c3e50;
}

.table-scroll tbody tr:nth-child(even) {
    background: #f8f9fa;
}

/* Sources et avertissements */
.liste-sources {
    list-style: disc;
    margin: 0 0 12px 20px;
    color: #333;
    line-height: 1.7;
}

.avertissement {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fdf0e3;
    border: 1px solid #f0c896;
    border-radius: 8px;
    padding: 12px 14px;
    color: #7a4a12;
    font-size: 14px;
}

.avertissement i {
    margin-top: 3px;
}

/* FAQ */
.faq-item {
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-item h3 {
    margin: 0 0 8px;
}

.faq-item p {
    margin: 0;
    color: #333;
}

/* Utilitaire d'accessibilité */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Liens et focus visibles au clavier */
a {
    color: #1976d2;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 3px solid #43285c;
    outline-offset: 2px;
}

/* Responsive : une colonne sous 768 px, aucun débordement de page */
@media (max-width: 768px) {
    .container {
        margin: 10px;
        padding: 15px;
        border-radius: 10px;
    }

    .champs-ligne {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 18px;
    }

    .fieldset-mode {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .tool-content {
        padding: 10px 0;
    }

    .resultat-compte dd {
        font-size: 1em;
    }
}

/* Impression : fiche recette propre, sans outil interactif ni pub */
@media print {
    body {
        background: white;
    }

    .container {
        box-shadow: none;
        margin: 0;
    }

    .exemples,
    .actions-partage,
    .zone-lien,
    .fieldset-mode,
    #champ-style-pizza,
    #champ-style-pain,
    .tb-rayon,
    .ml-ad {
        display: none;
    }
}