<?php
/*
Template Name: pourquoi-on-dit
*/

get_header(); ?>

<style>
.pod-page {
    min-height: 100vh;
    background-color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pod-hero {
    padding: 100px 20px 70px;
    text-align: center;
    background: url('https://www.curieuxde.fr/wp-content/uploads/2025/10/decoscope.fr-1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.pod-hero-card {
    max-width: 840px;
    margin: 0 auto;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(3,25,38,0.08);
    border-radius: 16px;
    padding: 26px 26px 28px;
    box-shadow: 0 18px 50px rgba(3,25,38,0.10);
    backdrop-filter: saturate(120%) blur(8px);
    position: relative;
}

.pod-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
    color: #489fb5;
    background: rgba(72,159,181,0.10);
    border: 1px solid rgba(72,159,181,0.22);
    padding: 6px 10px;
    border-radius: 999px;
}

.pod-hero h1 {
    font-size: 2.8rem;
    color: #031926;
    margin-bottom: 14px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.01em;
    position: relative;
}

.pod-hero h1:after {
    content: '';
    display: block;
    width: 120px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #489fb5, #81c7d6);
}

.pod-hero p {
    font-size: 1.15rem;
    color: #485057;
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.75;
}

.pod-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.pod-intro {
    margin: 60px 0 30px;
    text-align: center;
}

.pod-intro h2 {
    font-size: 1.8rem;
    color: #031926;
    margin-bottom: 10px;
}

.pod-intro p {
    color: #333;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

.pod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin: 40px 0 70px;
}

.pod-card {
    background: #FFFFFF;
    border: 1px solid rgba(3,25,38,0.08);
    border-radius: 12px;
    padding: 22px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 28px rgba(3,25,38,0.06);
}

.pod-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(3,25,38,0.12);
}

.pod-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: #031926;
}

.pod-card .pod-tag {
    display: inline-block;
    font-size: 0.8rem;
    color: #489fb5;
    background: rgba(72,159,181,0.1);
    border: 1px solid rgba(72,159,181,0.22);
    padding: 4px 8px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.pod-card p {
    margin: 0;
    color: #444;
    line-height: 1.7;
}

.pod-section-title {
    font-size: 1.6rem;
    color: #031926;
    margin: 10px 0 22px 0;
    position: relative;
    padding-bottom: 14px;
}

.pod-section-title:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 56px;
    height: 3px;
    background: #489fb5;
}

.pod-cta {
    background: #F8F9FA;
    border-radius: 14px;
    padding: 30px 24px;
    border: 1px solid rgba(3,25,38,0.08);
    box-shadow: 0 10px 28px rgba(3,25,38,0.06);
    margin: 20px 0 80px;
    text-align: center;
}

.pod-cta h3 {
    margin: 0 0 8px 0;
    color: #031926;
    font-size: 1.4rem;
}

.pod-cta p {
    margin: 0 0 18px 0;
    color: #485057;
}

.pod-cta-actions {
    display: inline-flex;
    gap: 12px;
}

.pod-btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pod-btn-primary {
    background: #489fb5;
    color: #FFFFFF;
    box-shadow: 0 8px 22px rgba(72,159,181,0.25);
}

.pod-btn-primary:hover {
    transform: translateY(-2px);
    background: #3a879a;
}

.pod-btn-outline {
    background: #FFFFFF;
    color: #031926;
    border: 2px solid #489fb5;
}

.pod-btn-outline:hover {
    transform: translateY(-2px);
    background: rgba(72,159,181,0.12);
    border-color: #3a879a;
    color: #031926 !important;
}

/* .pod-keywords supprimé (intégration dispersée dans le texte) */

/* Quiz */
.pod-quiz {
    margin: 40px auto 60px;
    max-width: 900px;
}

.pod-quiz-intro {
    text-align: center;
    margin: 0 0 14px 0;
}

.pod-quiz-intro h2 {
    margin: 0 0 6px 0;
    font-size: 1.6rem;
    color: #031926;
}

.pod-quiz-intro p {
    margin: 0;
    color: #485057;
}

.pod-quiz-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFD 100%);
    border: 1px solid rgba(3,25,38,0.08);
    border-radius: 16px;
    padding: 24px 24px 26px;
    box-shadow: 0 16px 40px rgba(3,25,38,0.08);
}

.pod-quiz-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.pod-quiz-title {
    font-size: 1.2rem;
    color: #031926;
    font-weight: 800;
    margin: 0;
}

.pod-quiz-subtitle { color: #489fb5; margin: 0; }
.pod-quiz-progress { color: #485057; font-size: 0.95rem; background: #F1F5F7; padding: 6px 10px; border-radius: 999px; }

.pod-quiz-question {
    margin: 12px 0 16px;
    font-weight: 700;
    color: #031926;
}

.pod-quiz-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.pod-quiz-btn {
    width: 100%;
    text-align: left;
    background: #F8F9FA;
    color: #031926 !important;
    border: 1px solid rgba(3,25,38,0.10);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
}

.pod-quiz-btn:hover { background: #eef6f9; border-color: #489fb5; }
.pod-quiz-btn:focus-visible { outline: 2px solid #81c7d6; outline-offset: 2px; }
.pod-quiz-btn:disabled { opacity: 0.7; cursor: not-allowed; }

.is-correct { border-color: #2e7d32; background: #e8f5e9; color: #0a6b2a; }
.is-incorrect { border-color: #c62828; background: #ffebee; color: #8a1c1c; }

.pod-quiz-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; }
.pod-quiz-next {
    background: #489fb5;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
}

.pod-quiz-next:disabled { opacity: 0.6; cursor: not-allowed; }
.pod-quiz-next:hover { background: #3a879a; }
.pod-quiz-next:hover { background: #3a879a; color: #FFFFFF !important; }
.pod-quiz-next:focus-visible { outline: 2px solid #81c7d6; outline-offset: 2px; }

.pod-quiz-feedback { margin-top: 8px; color: #485057; font-weight: 600; }
.pod-quiz-result { margin-top: 10px; font-weight: 700; color: #031926; }

@media (max-width: 768px) {
    .pod-hero { padding: 70px 18px 40px; }
    .pod-hero h1 { font-size: 2.2rem; }
    .pod-hero-card { padding: 20px; }
    .pod-intro { margin: 40px 0 24px; }
}

@media (min-width: 769px) {
    .pod-quiz-options { grid-template-columns: 1fr 1fr; }
}
</style>

<div class="pod-page">
    <div class="pod-hero">
        <div class="pod-container">
            <div class="pod-hero-card">
                <span class="pod-eyebrow">On décortique les mots</span>
                <h1>Pourquoi on dit…</h1>
                <p>Sur curieuxde.fr, on explore l’origine des expressions qu’on utilise au quotidien, des dictons de grand-mère aux tournures courantes, souvent sans savoir d’où elles viennent.</p>
            </div>
        </div>
    </div>

    <div class="pod-container">
        <div class="pod-container pod-quiz">
            <div class="pod-quiz-intro">
                <h2>Saurez-vous démasquer l’intrus&nbsp;?</h2>
                <p>10 questions flash&nbsp;: 5 expressions, 1 inventée. À vous de jouer&nbsp;!</p>
            </div>
            <div class="pod-quiz-card">
                <div class="pod-quiz-header">
                    <div>
                        <p class="pod-quiz-title">Expression ou invention ?</p>
                        <p class="pod-quiz-subtitle">5 expressions, 1 inventée • Trouvez l’intrus</p>
                    </div>
                    <div class="pod-quiz-progress" id="quizProgress">Question 1/10</div>
                </div>
                <div id="quizQuestion" class="pod-quiz-question">Question</div>
                <div id="quizOptions" class="pod-quiz-options"></div>
                <div class="pod-quiz-feedback" id="quizFeedback"></div>
                <div class="pod-quiz-actions">
                    <button class="pod-quiz-next" id="quizNext" disabled>Question suivante</button>
                </div>
                <div class="pod-quiz-result" id="quizResult" style="display:none;"></div>
            </div>
        </div>
        <div class="pod-intro">
            <h2 class="pod-section-title">Les mots ont une histoire (et on adore la raconter)</h2>
            <p>Notre langue déborde d’expressions imagées. Avec la série «&nbsp;Pourquoi on dit&nbsp;» sur curieuxde.fr, on tire le fil&nbsp;: petites anecdotes, repères historiques et chemins sémantiques qui expliquent comment ces formules sont entrées dans nos habitudes.</p>
        </div>

        <div class="pod-grid">
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Poser un lapin”</h3>
                <p>Au XIXe, côté argot parisien, “poser un lapin” voulait d’abord dire… ne pas payer la dame. Avec le temps, c’est devenu “ne pas venir au rendez-vous”.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Avoir le cafard”</h3>
                <p>Popularisée par Baudelaire, l’image du “cafard” colle parfaitement à la petite mélancolie qui s’invite sans prévenir. D’où son succès pour parler du blues.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Dicton</span>
                <h3>“Après la pluie, le beau temps”</h3>
                <p>Vieux proverbe météo devenu mantra du quotidien&nbsp;: patience, ça finit toujours par s’éclaircir.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Tournure</span>
                <h3>“Tomber dans les pommes”</h3>
                <p>Sans doute dérivé de “être dans les pommes cuites” (épuisé). Au final, l’expression a pris le sens qu’on connaît&nbsp;: s’évanouir.</p>
            </div>

            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Payer en espèces sonnantes et trébuchantes”</h3>
                <p>Au Moyen Âge, on vérifiait les pièces d’or en les faisant sonner (sonnantes) et en les pesant sur un “trébuchet” (trébuchantes). Les vraies avaient le bon son et le bon poids.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Mettre son grain de sel”</h3>
                <p>Au XVIIe, le sel était précieux et chacun apportait le sien à table. S’immiscer dans une discussion, c’était un peu ajouter son sel dans l’assiette d’autrui sans y être invité.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Avoir un coup de bambou”</h3>
                <p>Des colonies d’Asie vient l’idée que dormir sous des bambous (qui poussent vite) donnait maux de tête et coups de chaleur. D’où l’image d’un gros coup de fatigue.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Être le dindon de la farce”</h3>
                <p>Au XVIIe, des farces mettaient en scène de fausses cérémonies où la victime jouait le “dindon”, symbole de celui qu’on ridiculise.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Raconter des salades”</h3>
                <p>Au XIXe, “salade” désignait un mélange confus. Raconter des salades, c’est mêler vérités et mensonges comme on mélange les ingrédients d’une salade.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Avoir les jetons”</h3>
                <p>Les jetons servaient dans les maisons de jeu. La crainte de les perdre a fini par représenter la peur elle-même&nbsp;: avoir les jetons.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Couper la poire en deux”</h3>
                <p>Au XVIIe, on partageait la poire, fruit apprécié, pour symboliser un compromis équitable. Chacun fait un effort, et on tranche au milieu.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Tenir la chandelle”</h3>
                <p>Au XVIe, lors de rendez-vous nocturnes, un tiers tenait la chandelle pour éclairer les amants&nbsp;: position gênante du témoin involontaire.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Jeter l’éponge”</h3>
                <p>Dans la boxe du XIXe, l’entraîneur jetait une éponge sur le ring pour signaler l’abandon du boxeur blessé. D’où l’idée de renoncer.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Avoir un poil dans la main”</h3>
                <p>Image du XIXe pour moquer la paresse&nbsp;: être si inactif que des poils auraient le temps de pousser dans la paume, normalement lisse.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“En faire tout un fromage”</h3>
                <p>Référence à la fabrication du fromage, longue et méticuleuse&nbsp;: exagérer l’importance d’une chose toute simple.</p>
            </div>
            <div class="pod-card">
                <span class="pod-tag">Expression</span>
                <h3>“Tirer le diable par la queue”</h3>
                <p>Au Moyen Âge, le diable était insaisissable. Le tirer par la queue symbolise peiner à joindre les deux bouts, vivre avec très peu.</p>
            </div>
        </div>

        <div class="pod-cta">
            <h3>On parle de quoi ensuite&nbsp;?</h3>
            <p>Une idée d’expression à creuser&nbsp;? Lancez-nous une piste, ou poursuivez la lecture sur le blog. Et si vous aimez <strong>curieuxde.fr Pourquoi on dit</strong>, vous allez adorer nos prochains sujets.</p>
            <div class="pod-cta-actions">
                <a class="pod-btn pod-btn-primary" href="<?php echo esc_url(home_url('/blog')); ?>">Voir le blog</a>
                <a class="pod-btn pod-btn-outline" href="<?php echo esc_url(home_url('/contact')); ?>">Nous contacter</a>
            </div>
        </div>

        
    </div>
</div>

<?php get_footer(); ?>



<script>
document.addEventListener('DOMContentLoaded', function() {
    const questions = [
        {
            title: 'Question 1',
            options: [
                'A) Avoir le cul bordé de nouilles',
                'B) Être haut comme trois pommes',
                'C) Avoir les dents qui rayent le parquet',
                'D) Pleurer comme une fontaine',
                'E) Avoir les oreilles en cornichon'
            ],
            inventedIndex: 4
        },
        {
            title: 'Question 2',
            options: [
                'A) Tomber dans les pommes',
                'B) Raconter des salades',
                'C) Avoir des patates dans les chaussettes',
                'D) En faire tout un fromage',
                'E) Avoir la moutarde qui monte au nez'
            ],
            inventedIndex: 2
        },
        {
            title: 'Question 3',
            options: [
                'A) Mettre son grain de sel',
                'B) Casser du sucre sur le dos',
                'C) Avoir un poil dans la main',
                'D) Se prendre une louche dans les idées',
                'E) Prendre ses jambes à son cou'
            ],
            inventedIndex: 3
        },
        {
            title: 'Question 4',
            options: [
                'A) Poser un lapin',
                'B) Avoir d\'autres chats à fouetter',
                'C) Donner sa langue au chat',
                'D) Avoir des souris dans le grenier',
                'E) Être le dindon de la farce'
            ],
            inventedIndex: 3
        },
        {
            title: 'Question 5',
            options: [
                'A) Se faire rouler dans la farine',
                'B) Avoir les yeux plus gros que le ventre',
                'C) Mettre de l\'eau dans son vin',
                'D) Tourner autour du pot',
                'E) Avoir du beurre dans les lunettes'
            ],
            inventedIndex: 4
        },
        {
            title: 'Question 6',
            options: [
                'A) Jeter l\'éponge',
                'B) Se mettre le doigt dans l\'œil',
                'C) Avoir un cheveu sur la langue',
                'D) Prendre ses pieds pour des trompettes',
                'E) Casser les pieds'
            ],
            inventedIndex: 3
        },
        {
            title: 'Question 7',
            options: [
                'A) Être fauché comme les blés',
                'B) Avoir du bol',
                'C) Tomber dans les radis',
                'D) Être dans le coaltar',
                'E) Péter un câble'
            ],
            inventedIndex: 2
        },
        {
            title: 'Question 8',
            options: [
                'A) Couper les cheveux en quatre',
                'B) Ne pas casser trois pattes à un canard',
                'C) Avoir le cafard',
                'D) Mettre ses chaussettes à l\'envers',
                'E) Tirer le diable par la queue'
            ],
            inventedIndex: 3
        },
        {
            title: 'Question 9',
            options: [
                'A) Appuyer sur le champignon',
                'B) Se faire avoir sur toute la ligne',
                'C) Mettre les bouchées doubles',
                'D) Filer à l\'anglaise',
                'E) Avoir du vent dans la casquette'
            ],
            inventedIndex: 4
        },
        {
            title: 'Question 10',
            options: [
                'A) Avoir un coup de bambou',
                'B) Se faire remonter les bretelles',
                'C) Être à l\'ouest',
                'D) Prendre la poudre d\'escampette',
                'E) Avoir les boutons qui sifflent'
            ],
            inventedIndex: 4
        }
    ];

    const progressEl = document.getElementById('quizProgress');
    const questionEl = document.getElementById('quizQuestion');
    const optionsEl = document.getElementById('quizOptions');
    const feedbackEl = document.getElementById('quizFeedback');
    const nextBtn = document.getElementById('quizNext');
    const resultEl = document.getElementById('quizResult');

    let current = 0;
    let score = 0;
    let answered = false;

    function renderQuestion() {
        const q = questions[current];
        progressEl.textContent = `Question ${current + 1}/10`;
        questionEl.textContent = q.title;
        feedbackEl.textContent = '';
        nextBtn.disabled = true;
        answered = false;
        optionsEl.innerHTML = '';
        q.options.forEach((opt, idx) => {
            const btn = document.createElement('button');
            btn.className = 'pod-quiz-btn';
            btn.type = 'button';
            btn.textContent = opt;
            btn.addEventListener('click', () => onAnswer(idx, btn));
            optionsEl.appendChild(btn);
        });
    }

    function onAnswer(idx, btn) {
        if (answered) return;
        answered = true;
        const q = questions[current];
        const buttons = optionsEl.querySelectorAll('button');
        buttons.forEach((b, i) => {
            b.disabled = true;
            if (i === q.inventedIndex) {
                b.classList.add('is-correct');
            }
        });
        if (idx === q.inventedIndex) {
            score += 1;
            feedbackEl.textContent = 'Bien vu, c’était l’intrus !';
        } else {
            btn.classList.add('is-incorrect');
            feedbackEl.textContent = 'Raté ! L’intrus était la réponse E.';
        }
        nextBtn.disabled = false;
        if (current === questions.length - 1) {
            nextBtn.textContent = 'Voir le résultat';
        } else {
            nextBtn.textContent = 'Question suivante';
        }
    }

    function renderResult() {
        let label = '';
        if (score >= 8) label = 'Expert des expressions ! 🏆';
        else if (score >= 5) label = 'Bon connaisseur 👍';
        else label = 'Il faut réviser ! 📚';
        resultEl.style.display = 'block';
        resultEl.textContent = `Score : ${score}/10 — ${label}`;
    }

    nextBtn.addEventListener('click', () => {
        if (current < questions.length - 1) {
            current += 1;
            renderQuestion();
        } else {
            // fin
            questionEl.style.display = 'none';
            optionsEl.style.display = 'none';
            nextBtn.disabled = true;
            progressEl.textContent = 'Terminé';
            renderResult();
        }
    });

    renderQuestion();
});
</script>
