/* ============================================
   MATHS.CSS - Styles spécifiques aux exercices de Mathématiques
   Thème orange : --couleur-primaire: #d97706
   Contient les styles pour les 35 types d'exercices de maths
   (opérations posées, géométrie, conversions, etc.)
   ============================================ */

/* Surcharge des couleurs pour la vue Maths (thème orange) */
#maths-view {
    --couleur-primaire: #d97706;
    --couleur-secondaire: #f59e0b;
}

.btn-header:hover {
background: rgba(255, 255, 255, 0.25);
}

/* Layout principal */
.conteneur-principal {
display: flex;
min-height: calc(100vh - 52px);
}

@media (max-width: 1024px) {
.conteneur-principal { flex-direction: column; }
}

/* Panneau gauche - Configuration */
.panneau-config {
flex: 1;
min-width: 340px;
padding: 1.25rem 1rem;
overflow-y: auto;
max-height: calc(100vh - 52px);
border-right: 1px solid var(--couleur-bordure);
background: var(--couleur-fond);
}

@media (max-width: 1024px) {
.panneau-config { flex: 1; border-right: none; max-height: none; padding: 1rem; }
}

@media (max-width: 700px) {
.panneau-config { padding: 0.75rem; }
}

/* Panneau droit - Aperçu */
.panneau-apercu {
flex: 2;
padding: 1rem;
overflow-y: auto;
overflow-x: hidden;
min-width: 0;
display: flex;
justify-content: center;
background: var(--couleur-fond);
}

@media (max-width: 700px) {
.panneau-apercu { padding: 0.5rem; }
}

/* Sections */
.section-config {
padding: 0;
margin-bottom: 1.5rem;
}

.section-titre {
font-size: 1.3rem;
font-weight: 700;
color: var(--couleur-primaire);
margin-bottom: 1rem;
}

/* Contrôles */
.groupe-controle {
margin-bottom: 0.75rem;
background: white;
padding: 0.75rem;
border-radius: 6px;
border: 1px solid var(--couleur-bordure);
}

.groupe-controle label {
display: block;
font-weight: 600;
margin-bottom: 0.4rem;
font-size: 0.8rem;
color: var(--couleur-primaire);
}

.champ-texte, .champ-select {
width: 100%;
padding: 0.5rem 0.6rem;
border: 1.5px solid var(--couleur-bordure);
border-radius: 6px;
font-size: 0.85rem;
font-family: inherit;
}

/* Inputs numériques */
input[type="number"].champ-texte,
input[type="number"].champ-nombre {
width: 72px;
min-width: 72px;
text-align: center;
padding: 0.5rem 0.3rem;
-moz-appearance: textfield;
}

.champ-texte:focus, .champ-select:focus {
outline: none;
border-color: var(--couleur-secondaire);
box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1);
}

/* Niveaux */
.niveau-btn {
padding: 0.5rem 1rem;
border: 2px solid var(--couleur-bordure);
border-radius: 6px;
background: white;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}

.niveau-btn.active {
background: var(--couleur-secondaire);
color: white;
border-color: var(--couleur-secondaire);
}

/* Domaine header */

/* Menu des catégories (onglets) */
.categories-menu {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}

.categorie-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
padding: 0.5rem 0.8rem;
background: white;
border: 2px solid var(--couleur-bordure);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
min-width: 80px;
flex: 1;
}

.categorie-btn:hover {
border-color: var(--couleur-secondaire);
background: var(--couleur-fond);
}

.categorie-btn.active {
background: linear-gradient(135deg, var(--couleur-secondaire) 0%, var(--couleur-primaire) 100%);
border-color: var(--couleur-secondaire);
color: white;
}

.categorie-icon {
font-size: 1.2rem;
}

.categorie-nom {
font-size: 0.7rem;
font-weight: 600;
text-align: center;
}

.chevron {
transition: transform 0.3s;
font-size: 1.2rem;
}

/* Liste des exercices */
/* Listes d'exercices maths : cachées par défaut, affichées par domaine via JS */
#maths-view .liste-exercices {
display: none !important;
grid-template-columns: 1fr;
gap: 0.5rem;
padding: 0;
margin-bottom: 1rem;
}

/* Liste d'exercices maths visible quand son domaine est sélectionné */
#maths-view .liste-exercices.visible {
display: grid !important; /* Afficher uniquement la liste active */
}

.exercice-item {
border: 2px solid var(--couleur-bordure);
border-radius: 8px;
cursor: pointer;
background: white;
transition: all 0.3s;
overflow: hidden;
}

.exercice-item:hover {
border-color: var(--couleur-secondaire);
box-shadow: 0 2px 8px rgba(26, 54, 93, 0.1);
}

.exercice-item.actif {
border-color: var(--couleur-primaire);
background: rgba(44, 82, 130, 0.03);
box-shadow: var(--ombre-carte);
}

.exercice-nom {
font-weight: 600;
color: var(--couleur-primaire);
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1rem;
cursor: pointer;
transition: var(--transition);
}

.exercice-nom:hover {
background: var(--couleur-fond);
}

.exercice-nom-content {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
}

.exercice-icon-maths {
font-size: 1.25rem;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--couleur-fond);
border-radius: 6px;
flex-shrink: 0;
}

.badge-numero {
background: var(--couleur-succes);
color: white;
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
border-radius: 12px;
}

/* Configuration d'exercice */
.config-exercice {
display: none;
padding: 1rem;
background: var(--couleur-fond);
border-top: 1px solid var(--couleur-bordure);
}

.config-exercice.visible {
display: block;
}

#maths-view .exercice-item.config-open .exercice-chevron {
transform: rotate(180deg);
}

/* Boutons */
.btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
font-family: inherit;
font-size: 0.85rem;
}

.btn-primaire {
background: var(--couleur-secondaire);
color: white;
}

.btn-primaire:hover {
background: var(--couleur-primaire);
box-shadow: 0 2px 8px rgba(26, 54, 93, 0.2);
}

.btn-secondaire {
background: #e2e8f0;
color: var(--couleur-texte);
}

.btn-secondaire:hover {
background: #cbd5e0;
}

.btn-petit {
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
}

/* Liste d'items avec boutons */
.liste-items {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.5rem;
}

.item-ligne {
display: flex;
gap: 0.5rem;
align-items: center;
}

.item-ligne input {
flex: 1;
}

/* Feuille d'exercices */
.feuille-exercices {
width: 21cm;
max-width: 100%;
box-sizing: border-box;
min-height: 29.7cm;
background: white;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
padding: 1.5cm;
}

.exercice-bloc {
page-break-inside: avoid;
break-inside: avoid;
}

@media print {
.exercice-bloc {
    page-break-inside: avoid;
}
/* Grilles d'opérations : traits plus foncés à l'impression */
.op-grille td { border-color: #999; }
.op-grille tr.op-sep td:not(.op-none):not(.op-sym) { border-top: 2.5px solid #000; }
.op-grille td.op-vide { background: #fff; }
.op-grille tr.op-retenue td { border-color: #bbb; }
.div-potence .div-dividende,
.div-potence .div-diviseur,
.div-potence .div-quotient { border-color: #000; }
/* Encadrement */
.encadrement-case { background: #fff; }
}

.feuille-header {
display: flex;
justify-content: space-between;
margin-bottom: 1cm;
padding-bottom: 0.5cm;
border-bottom: 2px solid var(--couleur-primaire);
}

.feuille-titre-principal {
font-family: Georgia, 'Times New Roman', serif;
font-size: 20pt;
font-weight: 600;
color: var(--couleur-primaire);
}

.feuille-niveaux {
display: flex;
gap: 0.3cm;
margin-top: 0.3cm;
flex-wrap: wrap;
}

.niveau-badge {
padding: 0.1cm 0.3cm;
border-radius: 4px;
font-size: 8pt;
font-weight: 600;
border: 2px solid;
}

.niveau-badge.CP {
background: #fef2f2;
color: #dc2626;
border-color: #dc2626;
}

.niveau-badge.CE1 {
background: #fef3c7;
color: #d97706;
border-color: #d97706;
}

.niveau-badge.CE2 {
background: #dcfce7;
color: #16a34a;
border-color: #16a34a;
}

.niveau-badge.CM1 {
background: #dbeafe;
color: #2563eb;
border-color: #2563eb;
}

.niveau-badge.CM2 {
background: #f3e8ff;
color: #9333ea;
border-color: #9333ea;
}

.feuille-info {
text-align: right;
font-size: 10pt;
}

/* Exercices dans la feuille */
.exercices-container {
display: none;
}

.exercices-container.visible {
display: block;
}

.exercice-feuille {
/* Aération (v0.14.1), cohérente avec francais.css */
margin-bottom: 0.5cm;
padding-top: 0.15cm;
padding-bottom: 0.2cm;
border-bottom: 1px solid #e5e7eb;
page-break-inside: avoid;
}
.exercice-feuille:last-child {
border-bottom: none;
margin-bottom: 0;
}

.exercice-feuille-titre {
font-family: inherit;
font-weight: 700;
font-size: 11.5pt;
color: var(--couleur-primaire);
margin-bottom: 0.15cm;
display: flex;
align-items: center;
gap: 0.2cm;
}

/* Consigne affichée sur la même ligne que le numéro */
.exercice-consigne-inline {
font-style: italic;
font-weight: 400;
color: #333;
font-size: 10pt;
flex: 1;
}

/* Nom du type d'exercice, petit, aligné à droite */
.exercice-type-label {
font-size: 8pt;
font-weight: 400;
color: #888;
white-space: nowrap;
margin-left: auto;
}

.exercice-numero-badge {
background: var(--couleur-primaire);
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10pt;
}

.exercice-consigne {
font-style: italic;
color: #4a5568;
margin-bottom: 0.1cm;
font-size: 10pt;
}

.exercice-contenu {
font-size: 11pt;
line-height: 1.8;
overflow: hidden;       /* Empêcher tout débordement hors de la feuille */
max-width: 100%;        /* Contraindre au conteneur parent */
box-sizing: border-box;
}

/* Lignes d'écriture Seyes */
.ligne-ecriture {
position: relative;
height: 0.8cm;
margin-bottom: 0.2cm;
border-bottom: 1px solid #000;
}

.ligne-ecriture::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 1px dashed #ccc;
}

/* Ligne réponse simple */
/* Droite graduée */
.droite-graduee {
position: relative;
height: 3cm;
margin: 1cm 0;
}

/* Fractions */
.feuille-vide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 20cm;
color: #6b7280;
}

.feuille-vide-icone {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.3;
}

/* Radio buttons personnalisés */
.radio-group {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}

.radio-label {
display: flex;
align-items: center;
gap: 0.3rem;
cursor: pointer;
}

/* Grille pour inputs multiples */
.grille-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-top: 0.5rem;
}

/* Canvas de dessin pour quadrillage */
.canvas-dessin {
border: 2px solid #000;
cursor: crosshair;
display: block;
margin: 0.5cm auto;
background: white;
max-width: 100%;
height: auto;
}

.canvas-container {
text-align: center;
padding: 1rem;
background: #f3f4f6;
border-radius: 8px;
margin-top: 1rem;
}

.canvas-controls {
margin-top: 0.5rem;
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}

@media print {
.panneau-config, header, #nb-pages-indicator, #nb-pages-indicator-fr {
    display: none !important;
}
.panneau-apercu {
    padding: 0;
}
.feuille-exercices {
    box-shadow: none;
}
}

/* ===== QUADRILLAGE OPÉRATIONS POSÉES ===== */
/* Tableau de cases pour poser additions, soustractions, multiplications */
.op-grille {
    border-collapse: collapse;
    margin: 0.2cm 0 0.6cm 0;
}
.op-grille td {
    width: 12mm;
    height: 12mm;
    border: 1px solid #bbb;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    font-size: 14pt;
}
/* Case vide (pour la réponse de l'élève) */
.op-grille td.op-vide {
    background: #fafafa;
}
/* Case sans bordure (zone hors grille) */
.op-grille td.op-none {
    border: none;
    background: none;
}
/* Cellule d'opérateur (+, −, ×) */
.op-grille td.op-sym {
    border: none;
    font-size: 16pt;
    font-weight: bold;
    color: #333;
    padding-right: 2px;
}
/* Ligne de séparation épaisse (avant le résultat) */
.op-grille tr.op-sep td:not(.op-none):not(.op-sym) {
    border-top: 2.5px solid #000;
}
/* Ligne pointillée de retenue */
.op-grille tr.op-retenue td {
    border: 1px dashed #ccc;
    height: 7mm;
    font-size: 10pt;
    color: #999;
}
/* Potence division : cadre en L */
.div-potence {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 0;
    margin: 0.3cm 0 0.8cm 0;
}
.div-dividende {
    padding: 4mm 3mm 4mm 3mm;
    font-weight: bold;
    font-size: 16pt;
    display: flex;
    gap: 0;
    align-items: center;
}
.div-digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12mm;
    height: 12mm;
    font-weight: bold;
    font-size: 16pt;
}
.div-digit-vide {
    border-bottom: 1.5px solid #999;
    margin: 0 1mm;
}
.div-diviseur {
    padding: 4mm 6mm;
    font-weight: bold;
    font-size: 16pt;
    border-left: 2.5px solid #000;
    border-bottom: 2.5px solid #000;
    min-width: 2cm;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.div-reste {
    padding: 4mm 3mm;
    min-height: 4cm;
    font-size: 14pt;
}
.div-quotient {
    padding: 4mm 6mm;
    border-left: 2.5px solid #000;
    min-height: 4cm;
    font-size: 14pt;
    display: flex;
    gap: 0;
    align-items: flex-start;
    padding-top: 5mm;
}
/* Encadrement amélioré avec crochets visuels */
.encadrement-item {
    display: flex;
    align-items: center;
    gap: 0.4cm;
    margin-bottom: 0.6cm;
    font-size: 12pt;
}
.encadrement-case {
    display: inline-block;
    min-width: 1.8cm;
    height: 1cm;
    border: 2px solid #000;
    border-radius: 4px;
    text-align: center;
    vertical-align: middle;
    line-height: 1cm;
    background: #fafafa;
}
.encadrement-symbole {
    font-size: 14pt;
    font-weight: bold;
}
/* Segment amélioré pour mesurer */
.segment-mesurer {
    margin-bottom: 1.2cm;
    padding: 0.3cm 0;
}
.segment-mesurer svg line.segment-trait {
    stroke-linecap: round;
}

</style>