/*
 * entrevue.css — L'ENTREVUE : la conversation d'accueil (Lot D1, refonte 2026)
 *
 * Namespace .ent- (nouveau, zero collision). Squelette du systeme design : fond
 * #0a0a0a et #111111 alternes, bordures #2a2a2a, accent menthe #00ff88, accent
 * carburant #f97316 sur la Q2 (generatrice). La section s'ouvre et se ferme sur
 * #0a0a0a (regle du systeme : zero cassure avec le hero au-dessus).
 *
 * Garde-fous appliques (verdicts 25 sept) : traductions FR en #bbb (pas #aaa,
 * italique fin trop juste) · plancher 0,78rem respecte partout · ZERO glow,
 * zero animation (doctrine) · question 54 px ramenee ~36 px sous 700 px.
 * Render-blocking assume (~3,5 Ko gz) : grilles = jamais de FOUC (lecon V3.3.3).
 *
 * @package    OFFGRID.QC
 * @author     Danny Pilote
 * @copyright  2026 Danny Pilote — OFFGRID.QC. Tous droits réservés.
 * @version    1.4
 * @date       26 septembre 2026
 * @changelog  V1.4: LOT D3 — LE GERME (planche V17 L408-465, « Un projet qui germe? J'ai de
 *             la place au soleil. ») : section .ent-germe (fond carte #1a1a1a, bord-top,
 *             padding 4,9 rem, mesure 1200), grille 1fr/420 gap 4 rem, liste d'items bordés,
 *             formulaire encadré (#0a0a0a radius 16 pad 26/24), champs sombres focus outline
 *             2 px menthe offset 1, labels 0,78 rem .1em uppercase. Réutilise la typo .ent-x
 *             existante (eyebrow, h2, lede, small, p, btn). Miroir germe.php V1.0.
 * @changelog  V1.3: Q6 FUSIONNÉE (planche V17 VALIDÉE, GO Danny) — la carte preuve vit dans
 *             la colonne question de la Q6 (.ent-q-mid .ent-preuve : margin-top 1,9 rem,
 *             max 560 px) avec la grille 2×2 de puces COMPTEUR (.ent-puce ; b mono 0,94 rem,
 *             étiquettes montées au plancher 0,78 rem ; accents menthe et solaire ambre) ;
 *             le bloc AVEU séparé est SUPPRIMÉ : .ent-aveu, .ent-aveu-grille et
 *             .ent-preuve-mot purgées (zéro orpheline), .ent-btn recalé 1,5 rem (planche).
 *             Nouvelles vars --ent-carte et --ent-solaire. Miroir entrevue.php V1.3.
 * @changelog  V1.2: Lot D2c — ALIGNEMENT PLANCHE V15 (diff dpicasso mesuré) : (1) l'AVEU en
 *             2 colonnes 1fr/440 avec la CARTE PREUVE (bordure menthe, gradient 135deg
 *             #1a1a1a vers #0f1a14, pastille pill) SANS box-shadow (garde-fou Danny zéro
 *             glow) ni chiffres — règles centrées purgées ; (2) RESPIRATION : rangées
 *             3,4 → 3,8 rem, ouverture et aveu 4,5 rem ; (3) MESURE : contenu 1336 → 1200 px
 *             (colonne question ~660, le ratio théâtral de la planche).
 * @changelog  V1.1: Lot D2 — ODOMÈTRE de jours hors réseau (.ent-odo-x : cases de compteur
 *             mécanique, fenêtre 1em overflow hidden, ombres de rouleau, chiffres menthe
 *             mono) remplaçant .ent-jours/.ent-jours-num (purgées, zéro orpheline) ; le
 *             roulement vient du JS inline d'entrevue.php V1.1 (transform composited).
 *             Aucune animation CSS infinie (doctrine).
 * @changelog  V1.0: Lot D1 — habillage ouverture + Q1-Q6 + aveu VRM (miroir entrevue.php V1.0).
 */

/* ═══════════════════════════════════════
   VARIABLES LOCALES
═══════════════════════════════════════ */
:root {
    --ent-fond:      #0a0a0a;
    --ent-fond-alt:  #111111;
    --ent-carte:     #1a1a1a;
    --ent-bordure:   #2a2a2a;
    --ent-encre:     #ffffff;
    --ent-doux:      #cccccc;
    --ent-att:       #bbbbbb;
    --ent-sol:       #aaaaaa;
    --ent-menthe:    #00ff88;
    --ent-menthe-2:  #00d97e;
    --ent-encre-vert: #0a2015;
    --ent-feu:       #f97316;
    --ent-solaire:   #ffc107;
    --ent-mono:      Consolas, 'SF Mono', Menlo, Monaco, monospace;
}

/* ═══════════════════════════════════════
   SECTION + RANGÉES (bordures pleine largeur, contenu centré 1336 px)
═══════════════════════════════════════ */
.ent {
    background: var(--ent-fond);
    border-bottom: 1px solid var(--ent-bordure);
}

.ent-rangee {
    border-bottom: 1px solid var(--ent-bordure);
    padding: 3.8rem max(2rem, calc((100% - 1200px) / 2));
}

.ent-rangee:last-child { border-bottom: none; }

/* L'ouverture respire plus large (planche : 76 px) */
.ent-ouverture {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.ent-alt { background: var(--ent-fond-alt); }

/* ═══════════════════════════════════════
   TYPO COMMUNE
═══════════════════════════════════════ */
.ent-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ent-sol);
    margin: 0;
}

.ent-eyebrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background: currentColor;
}

.ent-h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.24rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--ent-encre);
    margin: 1rem 0 0;
    text-align: left;
}

.ent-lede {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ent-doux);
    max-width: 620px;
    margin: 1rem 0 0;
}

.ent-small {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--ent-sol);
    margin: 0.6rem 0 0;
}

/* Traductions pour les cousins d'Europe — #bbb (garde-fou : #aaa italique fin trop juste) */
.ent-fr {
    display: flex;
    align-items: baseline;
    gap: 11px;
    max-width: 560px;
    font-size: 0.88rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--ent-att);
    margin: 1rem 0 0;
}

.ent-fr i {
    font-family: var(--ent-mono);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ent-menthe);
    flex: none;
}

/* ═══════════════════════════════════════
   OUVERTURE — texte + compteur
═══════════════════════════════════════ */
.ent-ouverture {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3.4rem;
    align-items: end;
}

.ent-ouverture-compteur { text-align: right; }

.ent-compteur {
    font-family: var(--ent-mono);
    font-size: 5.18rem;
    font-weight: 600;
    line-height: 0.9;
    color: var(--ent-menthe);
    margin: 0;
}

/* ── L'ODOMÈTRE — le compteur de jours qui ROULE (V1.1) ──
   Chaque chiffre dans sa case de compteur mécanique : fenêtre de 1em, colonne 0-9
   positionnée server-side (translateY inline = toujours juste), roulée par le JS
   au premier passage dans le viewport. Ombres de rouleau en pseudo-éléments. */
.ent-odo {
    display: inline-flex;
    gap: 5px;
    margin-top: 1.1rem;
}

.ent-odo-sep { width: 8px; }

.ent-odo-case {
    display: block;
    position: relative;
    font-family: var(--ent-mono);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ent-menthe);
    background: #0d0d0d;
    border: 1px solid var(--ent-bordure);
    border-radius: 6px;
    padding: 0.2em 0.26em;
}

.ent-odo-case::before,
.ent-odo-case::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 32%;
    z-index: 1;
    pointer-events: none;
}

.ent-odo-case::before { top: 0;    border-radius: 6px 6px 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent); }
.ent-odo-case::after  { bottom: 0; border-radius: 0 0 6px 6px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent); }

.ent-odo-fen {
    display: block;
    height: 1em;
    width: 1.15ch;
    overflow: hidden;
}

.ent-odo-roul { display: block; }

.ent-odo-roul span {
    display: block;
    height: 1em;
    text-align: center;
}

.ent-jours-lab {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ent-sol);
    margin: 0.55rem 0 0;
}

/* ═══════════════════════════════════════
   LES QUESTIONS — grille numéro · question · réponse
═══════════════════════════════════════ */
.ent-q {
    display: grid;
    grid-template-columns: 96px 1fr 400px;
    gap: 2.6rem;
    align-items: start;
}

.ent-q-no {
    font-family: var(--ent-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ent-sol);
    padding-top: 16px;
    line-height: 1.5;
}

.ent-q-no b {
    display: block;
    font-size: 2rem;
    color: var(--ent-menthe);
    line-height: 1;
    margin-bottom: 6px;
}

.ent-q-txt {
    font-size: clamp(2.1rem, 4.2vw, 3.18rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ent-encre);
    margin: 0;
}

.ent-q-txt em {
    font-style: normal;
    color: var(--ent-menthe);
}

/* Q2 génératrice : l'accent carburant du système design */
.ent-feu .ent-q-no b,
.ent-feu .ent-q-txt em,
.ent-feu .ent-fr i { color: var(--ent-feu); }

.ent-q-rep { padding-top: 12px; }

.ent-p {
    font-size: 0.94rem;
    line-height: 1.75;
    color: var(--ent-doux);
    margin: 0;
}

.ent-manifeste { color: var(--ent-encre); }

.ent-chiffre {
    font-family: var(--ent-mono);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ent-encre);
    border-top: 1px solid var(--ent-bordure);
    margin-top: 18px;
    padding-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}

.ent-chiffre b { font-weight: 600; white-space: nowrap; }

.ent-chiffre span {
    color: var(--ent-sol);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: inherit;
}

/* Une porte par question — la doctrine survol : couleur seule, zéro déplacement.
   Spécificité 0-2-0 : bat le a:hover global (souligné blanc) sans !important. */
.ent-lien {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ent-menthe);
}

.ent-lien:hover,
.ent-lien:focus {
    color: var(--ent-menthe-2);
    text-decoration: none;
}

/* ═══════════════════════════════════════
   LA CARTE PREUVE — dans la colonne question de la Q6 (planche V17) :
   pastille + 4 puces COMPTEUR live. Bordure seule, zéro glow.
═══════════════════════════════════════ */
.ent-q-mid .ent-preuve {
    margin-top: 1.9rem;
    max-width: 560px;
}

.ent-preuve {
    border: 1px solid var(--ent-menthe);
    border-radius: 16px;
    background: linear-gradient(135deg, #1a1a1a, #0f1a14);
    padding: 1.65rem;
}

.ent-preuve-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 1.05rem;
}

.ent-puce {
    border: 1px solid var(--ent-bordure);
    border-radius: 12px;
    padding: 11px 15px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--ent-carte);
}

.ent-puce b {
    font-family: var(--ent-mono);
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--ent-encre);
    white-space: nowrap;
}

.ent-puce span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ent-sol);
}

.ent-puce-acc b { color: var(--ent-menthe); }
.ent-puce-sol b { color: var(--ent-solaire); }

.ent-preuve .ent-small { margin-top: 0.95rem; }

.ent-pastille {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ent-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ent-sol);
    border: 1px solid var(--ent-bordure);
    border-radius: 999px;
    padding: 4px 10px;
}

.ent-pastille i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ent-menthe);
    display: block;
    font-style: normal;
}


.ent-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ent-menthe);
    color: var(--ent-encre-vert);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 15px 26px;
    border-radius: 999px;
    margin-top: 1.5rem; /* V1.3 — planche V17 (26 px) */
    transition: background-color 0.2s ease;
}

.ent-btn:hover,
.ent-btn:focus {
    background: var(--ent-menthe-2);
    color: var(--ent-encre-vert);
    text-decoration: none;
}

/* ═══════════════════════════════════════
   LE GERME — collaborations + contact (Lot D3, planche V17)
═══════════════════════════════════════ */
.ent-germe {
    background: var(--ent-carte);
    border-top: 1px solid var(--ent-bordure);
    padding: 4.9rem max(2rem, calc((100% - 1200px) / 2));
}

.ent-germe-titre { max-width: 900px; }

.ent-germe-titre span { color: var(--ent-menthe); }

.ent-germe-grille {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 4rem;
    margin-top: 1.9rem;
    align-items: start;
}

.ent-germe-gauche { min-width: 0; } /* enfant de grid 1fr : jamais de débordement de texte */

.ent-germe-liste {
    display: flex;
    flex-direction: column;
    margin-top: 1.75rem;
}

.ent-germe-item {
    padding: 18px 0;
    border-top: 1px solid var(--ent-bordure);
}

.ent-germe-item:last-child { border-bottom: 1px solid var(--ent-bordure); }

.ent-germe-h3 {
    font-size: 1.19rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ent-encre);
    margin: 0;
}

.ent-germe-item .ent-p { margin-top: 5px; }

.ent-germe-mot { margin-top: 1.65rem; }

.ent-germe-salut {
    color: var(--ent-menthe);
    font-weight: 700;
}

.ent-germe-cadre {
    margin-top: 1.4rem;
    max-width: 620px;
}

/* Le formulaire encadré — le pipeline contact existant, habillé planche */
.ent-germe-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ent-fond);
    border: 1px solid var(--ent-bordure);
    border-radius: 16px;
    padding: 26px 24px;
}

.ent-champ {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ent-champ label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ent-sol);
}

.ent-champ input,
.ent-champ select,
.ent-champ textarea {
    background: var(--ent-carte);
    border: 1px solid var(--ent-bordure);
    border-radius: 8px;
    color: var(--ent-encre);
    font-family: inherit;
    font-size: 0.94rem;
    padding: 11px 13px;
    width: 100%;
    box-sizing: border-box;
}

.ent-champ textarea {
    resize: vertical;
    line-height: 1.5;
}

.ent-champ input:focus,
.ent-champ select:focus,
.ent-champ textarea:focus {
    outline: 2px solid var(--ent-menthe);
    outline-offset: 1px;
    border-color: var(--ent-menthe);
}

.ent-germe-btn {
    margin-top: 4px;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.ent-germe-note { margin-top: 0; }

/* ═══════════════════════════════════════
   RESPONSIVE — breakpoints du projet
═══════════════════════════════════════ */
@media (max-width: 1100px) {
    .ent-q { grid-template-columns: 76px 1fr 330px; gap: 2rem; }
    .ent-ouverture { grid-template-columns: 1fr 300px; gap: 2.4rem; }
    .ent-germe-grille { grid-template-columns: 1fr 380px; gap: 2.6rem; }
}

@media (max-width: 870px) {
    .ent-rangee { padding-top: 2.6rem; padding-bottom: 2.6rem; }
    .ent-ouverture { padding-top: 2.9rem; padding-bottom: 2.9rem; }
    .ent-ouverture { grid-template-columns: 1fr; align-items: start; }
    .ent-ouverture-compteur { text-align: left; }
    .ent-q { grid-template-columns: 1fr; gap: 1.1rem; }
    .ent-q-no { padding-top: 0; display: flex; align-items: baseline; gap: 12px; }
    .ent-q-no b { display: inline; font-size: 1.5rem; margin-bottom: 0; }
    .ent-q-rep { padding-top: 0; }
    .ent-germe { padding-top: 3.1rem; padding-bottom: 3.1rem; }
    .ent-germe-grille { grid-template-columns: 1fr; gap: 2.2rem; }
}

@media (max-width: 700px) {
    .ent-q-txt { font-size: clamp(1.9rem, 7.5vw, 2.12rem); }
    .ent-compteur { font-size: 3.8rem; }
    .ent-odo-case { font-size: 1.5rem; }
}

@media (max-width: 430px) {
    .ent-rangee { padding-left: 1.25rem; padding-right: 1.25rem; }
    .ent-chiffre { gap: 6px 12px; }
    .ent-btn { width: 100%; justify-content: center; }
    .ent-germe { padding-left: 1.25rem; padding-right: 1.25rem; }
    .ent-germe-form { padding: 20px 16px; }
}