/* ========================================
   RESET & BASE
   Cette partie remet à zéro les marges de base
   et rend les dimensions plus faciles à gérer.
======================================== */
* {
    /* Inclut les bordures et le padding dans la largeur totale des éléments. */
    box-sizing: border-box;

    /* Supprime les marges par défaut du navigateur. */
    margin: 0;

    /* Supprime les espacements internes par défaut. */
    padding: 0;
}

/* ========================================
   PAGE GÉNÉRALE
   Style global appliqué à toute la page.
======================================== */
body {
    /* Couleur de fond générale de la page. */
    background-color: #fdf6ee;

    /* Police principale utilisée sur la page. */
    font-family: 'Georgia', serif;

    /* Couleur principale du texte. */
    color: #3a2e22;

    /* Espacement autour du contenu de la page. */
    padding: 40px 16px;
}

/* ========================================
   CONTENU PRINCIPAL (centré, largeur limitée)
   La balise main contient toute la recette.
======================================== */
main {
    /* Largeur maximale du bloc de contenu. */
    max-width: 720px;

    /* Centre le bloc horizontalement. */
    margin: 0 auto;

    /* Fond blanc pour créer une carte lisible. */
    background-color: #ffffff;

    /* Coins légèrement arrondis. */
    border-radius: 12px;

    /* Espace intérieur du bloc principal. */
    padding: 40px 48px;

    /* Ombre douce pour détacher la carte du fond. */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ========================================
   IMAGE DE LA RECETTE
======================================== */
main img {
    /* Transforme l'image en bloc pour faciliter le centrage et les marges. */
    display: block;

    /* L'image prend toute la largeur disponible dans main. */
    width: 100%;

    /* Empêche l'image de dépasser son conteneur. */
    max-width: 100%;

    /* Hauteur fixe pour garder un rendu régulier. */
    height: 360px;

    /* Recadre l'image sans la déformer. */
    object-fit: cover;

    /* Arrondit légèrement les coins de l'image. */
    border-radius: 8px;

    /* Centre l'image et ajoute un espace en dessous. */
    margin: 0 auto 32px auto;
}

/* ========================================
   TITRES
======================================== */
h1 {
    /* Police du titre principal. */
    font-family: 'Georgia', serif;

    /* Taille du titre principal. */
    font-size: 2rem;

    /* Met le titre en gras. */
    font-weight: bold;

    /* Couleur rouge du titre. */
    color: #c0392b;

    /* Centre le titre. */
    text-align: center;

    /* Espace sous le titre. */
    margin-bottom: 20px;

    /* Ajoute un léger espacement entre les lettres. */
    letter-spacing: 0.5px;
}

h2 {
    /* Police des titres de section. */
    font-family: 'Georgia', serif;

    /* Taille des titres de section. */
    font-size: 1.3rem;

    /* Met les titres de section en gras. */
    font-weight: bold;

    /* Couleur brun/orangé des titres secondaires. */
    color: #7b3f00;

    /* Ligne décorative sous les titres. */
    border-bottom: 2px solid #f5c6a0;

    /* Espace entre le texte du titre et sa bordure. */
    padding-bottom: 6px;

    /* Espace sous les titres de section. */
    margin-bottom: 16px;

    /* Espace au-dessus des titres de section. */
    margin-top: 36px;
}

/* ========================================
   DESCRIPTION
======================================== */
.description {
    /* Taille du texte descriptif. */
    font-size: 1rem;

    /* Hauteur de ligne pour améliorer la lisibilité. */
    line-height: 1.8;

    /* Couleur légèrement plus douce que le texte principal. */
    color: #5a4a3a;

    /* Justifie le paragraphe pour aligner les deux côtés. */
    text-align: justify;

    /* Espace sous la description. */
    margin-bottom: 24px;

    /* Met la description en italique. */
    font-style: italic;
}

/* ========================================
   TEMPS DE CUISSON (mis en évidence)
======================================== */
#cook-time {
    /* Permet au bloc de prendre seulement la largeur de son contenu. */
    display: inline-block;

    /* Fond rouge pour faire ressortir l'information. */
    background-color: #c0392b;

    /* Texte blanc pour le contraste. */
    color: #ffffff;

    /* Police du badge de temps. */
    font-family: 'Georgia', serif;

    /* Taille du texte. */
    font-size: 0.95rem;

    /* Texte en gras. */
    font-weight: bold;

    /* Espacement intérieur du badge. */
    padding: 10px 20px;

    /* Coins arrondis du badge. */
    border-radius: 6px;

    /* Espace sous le badge. */
    margin-bottom: 8px;

    /* Espacement léger entre les lettres. */
    letter-spacing: 0.4px;
}

/* ========================================
   LISTE DES INGRÉDIENTS
======================================== */
.ingredients {
    /* Supprime les puces classiques de la liste. */
    list-style: none;

    /* Supprime le padding par défaut de la liste. */
    padding: 0;

    /* Utilise une grille pour afficher les ingrédients en deux colonnes. */
    display: grid;

    /* Crée deux colonnes de même largeur. */
    grid-template-columns: 1fr 1fr;

    /* Définit les espaces entre les lignes et les colonnes. */
    gap: 10px 24px;
}

.ingredients li {
    /* Taille du texte dans les éléments de liste. */
    font-size: 0.97rem;

    /* Hauteur de ligne pour rendre la liste lisible. */
    line-height: 1.5;

    /* Espace à gauche pour laisser la place à l'icône fraise. */
    padding-left: 20px;

    /* Sert de référence pour positionner l'icône en absolute. */
    position: relative;

    /* Couleur du texte des ingrédients. */
    color: #3a2e22;
}

.ingredients li::before {
    /* Ajoute une fraise avant chaque ingrédient. */
    content: '🍓';

    /* Positionne l'icône par rapport au li. */
    position: absolute;

    /* Place l'icône à gauche de la ligne. */
    left: 0;

    /* Taille de l'icône. */
    font-size: 0.85rem;

    /* Ajuste légèrement la position verticale de l'icône. */
    top: 1px;
}

/* Ligne "Pour le crumble" sur toute la largeur */
.ingredients li:last-child {
    /* Le dernier ingrédient occupe les deux colonnes de la grille. */
    grid-column: 1 / -1;

    /* Ajoute une séparation visuelle avant le crumble. */
    border-top: 1px dashed #f5c6a0;

    /* Espace entre la bordure et le texte. */
    padding-top: 10px;

    /* Petit espace au-dessus de cette ligne. */
    margin-top: 4px;
}

/* ========================================
   LISTE DE PRÉPARATION
======================================== */
ol {
    /* Décale la liste ordonnée vers la droite pour laisser la place aux numéros. */
    padding-left: 24px;
}

ol li {
    /* Taille du texte des étapes. */
    font-size: 0.97rem;

    /* Hauteur de ligne pour améliorer la lecture. */
    line-height: 1.75;

    /* Espace entre les étapes. */
    margin-bottom: 18px;

    /* Couleur du texte des étapes. */
    color: #3a2e22;
}

ol li::marker {
    /* Couleur des numéros de la liste. */
    color: #c0392b;

    /* Met les numéros en gras. */
    font-weight: bold;

    /* Taille des numéros. */
    font-size: 1.1rem;
}

/* Temps des étapes (en gris) */
.time {
    /* Permet d'ajouter des marges tout en restant dans le texte. */
    display: inline-block;

    /* Couleur grise pour indiquer une information secondaire. */
    color: #888888;

    /* Taille plus petite que le texte principal. */
    font-size: 0.85rem;

    /* Met les temps en italique. */
    font-style: italic;

    /* Espace entre le texte de l'étape et le temps indiqué. */
    margin-left: 8px;
}

/* ========================================
   LIEN EXTERNE
======================================== */
.external-link {
    /* Affiche le lien comme un bloc pour pouvoir le centrer. */
    display: block;

    /* Ajoute un espace au-dessus du lien. */
    margin-top: 40px;

    /* Centre le texte du lien. */
    text-align: center;

    /* Taille du texte du lien. */
    font-size: 0.95rem;

    /* Couleur orange du lien. */
    color: #e67e22;

    /* Retire le soulignement par défaut. */
    text-decoration: none;

    /* Met le lien en gras. */
    font-weight: bold;

    /* Ajoute un léger espacement entre les lettres. */
    letter-spacing: 0.3px;

    /* Rend le changement de couleur plus fluide au survol. */
    transition: color 0.2s;
}

.external-link:hover {
    /* Change la couleur du lien quand la souris passe dessus. */
    color: #c0392b;

    /* Ajoute un soulignement au survol. */
    text-decoration: underline;
}