@charset "utf-8";

/* exta.fr — le dictionnaire */

@font-face {
    font-family: 'daysregular';
    src: url('../font/Days-webfont.woff') format('woff'),
         url('../font/Days-webfont.ttf') format('truetype'),
         url('../font/Days-webfont.svg#daysregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --encre:    #f4efe4;   /* mot-vedette, filets, lettrine */
    --corps:    #d5cfc3;   /* definition */
    --discret:  #8d887e;   /* phonetique, categorie, notes */
    --trait:    rgba(244, 239, 228, .22);
    --panneau:  rgba(0, 0, 0, .72);
    --serif:    Georgia, 'Iowan Old Style', 'Times New Roman', Times, serif;
    --titrage:  'daysregular', Verdana, Geneva, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 5vw, 2rem);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 6vw, 3.5rem);
    background: #000 url('../img/SC_damask7.png');
    color: var(--corps);
    font-family: var(--serif);
    font-size: clamp(1rem, .96rem + .25vw, 1.125rem);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Le damassé reste visible, mais assombri : sans cela le texte du pied
   de page se perd dans le motif. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 36%,
                rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 88%);
    pointer-events: none;
}

header,
main,
footer {
    position: relative;   /* au-dessus du voile */
}

main {
    width: 100%;
    max-width: 48rem;
}

/* ---------- l'enseigne ---------- */

/* Le titre n'est pas un <h1> : le mot-vedette l'est, et c'est lui que
   l'adresse designe. L'enseigne nomme le site, comme le pied de page. */
.enseigne {
    width: 100%;
    max-width: 38rem;
    text-align: center;
}

.enseigne-titre {
    margin: 0 0 .55rem;
    font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
    line-height: 1.2;
    color: var(--encre);
    letter-spacing: .01em;
}

.accroche {
    margin: 0;
    font-size: .95rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--corps);
}

/* ---------- l'entree ---------- */

.entree {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.25rem, 4vw, 2.25rem);
    align-items: start;
    padding: clamp(1.5rem, 5vw, 2.75rem);
    background: var(--panneau);
    border: 1px solid var(--trait);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 45px rgba(0, 0, 0, .55);
}

.entree-lettrine { color: var(--encre); }

svg.lettrine {
    display: block;
    width: clamp(5rem, 15vw, 7.5rem);
    height: auto;
    opacity: .92;
}

.lettrine-lettre {
    font-family: var(--serif);
    font-size: 108px;
    fill: currentColor;
}

.entree-corps > * { margin: 0 0 .85rem; }
.entree-corps > *:last-child { margin-bottom: 0; }

.mot {
    font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3rem);
    font-weight: normal;
    line-height: 1.1;
    color: var(--encre);
    letter-spacing: .005em;
}

.meta {
    font-size: .94em;
    color: var(--discret);
}

.phon { font-family: var(--serif); }

.cat {
    font-style: italic;
    margin-left: .6em;
}

.etym {
    font-size: .94em;
    color: var(--discret);
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--trait);
}

.etiquette {
    font-variant: small-caps;
    letter-spacing: .06em;
}

.def { color: var(--corps); }

.ex {
    font-style: italic;
    color: var(--discret);
    padding-left: 1rem;
    border-left: 2px solid var(--trait);
}

/* ---------- le bouton ---------- */

.actions {
    margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
    text-align: center;
}

.bouton {
    display: inline-block;
    padding: .7em 1.6em;
    font-family: var(--titrage);
    font-size: .8rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--corps);
    background: rgba(0, 0, 0, .6);
    border: 1px solid var(--trait);
    border-radius: 6px;
    transition: color .2s, border-color .2s, background-color .2s;
}

.bouton:hover,
.bouton:focus-visible {
    color: #000;
    background: var(--encre);
    border-color: var(--encre);
}

/* ---------- le pied de page ---------- */

footer {
    width: 100%;
    max-width: 38rem;
    text-align: center;
    color: #a6a099;
}

.note {
    margin: 0 0 .6rem;
    font-size: .88rem;
    line-height: 1.7;
}

.note strong {
    font-weight: normal;
    color: var(--encre);
}

.lettres {
    display: inline-block;
    font-family: var(--titrage);
    font-size: .76em;
    letter-spacing: .12em;
    color: var(--corps);
}

.tenue { opacity: .62; }

/* ---------- la ligne d'assistance ---------- */

.assistance {
    margin-top: clamp(1.4rem, 4vw, 2rem);
    padding-top: clamp(1.1rem, 3vw, 1.5rem);
    border-top: 1px solid var(--trait);
    margin-bottom: clamp(1.4rem, 4vw, 2rem);
    padding-bottom: clamp(1.1rem, 3vw, 1.5rem);
    border-bottom: 1px solid var(--trait);
}

.assistance .intitule {
    margin: 0 0 .5rem;
    font-family: var(--titrage);
    font-size: .68rem;
    letter-spacing: .18em;
    text-indent: .18em;
    text-transform: uppercase;
}

.assistance .numero {
    margin: 0 0 .55rem;
    font-family: var(--titrage);
    font-size: clamp(1rem, .9rem + .5vw, 1.2rem);
    letter-spacing: .06em;
    /* Espaces ordinaires et nowrap : la police Days n'a pas de glyphe
       pour l'espace insecable, qu'elle rendrait par un « A ». */
    white-space: nowrap;
}

/* Le cartouche tarifaire : panneau clair pour le numero, bloc plein pour la
   mention, un chevron entre les deux. La mention detourne celle des
   numeros speciaux : un 02 n'en est pas un, la formule officielle serait donc
   fausse ici — et « inutile » est de toute facon plus exact, puisqu'il n'est
   pas repondu. */
.cartouche {
    --bloc: #6b665d;
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    background: var(--encre);
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.cartouche-numero {
    align-self: center;
    padding: .38em .5em .38em .8em;
    color: #5c574f;
    letter-spacing: .06em;
}

.cartouche-mention {
    position: relative;
    flex: 0 0 auto;   /* la mention ne se laisse jamais comprimer */
    display: flex;
    flex-direction: column;
    justify-content: center;   /* la mention se cale au milieu, quelle que soit la hauteur du panneau */
    margin-left: calc(1em + 3px);   /* la fleche, puis le jour qui l'en separe */
    padding: .5em .9em .5em 1.5em;  /* la gauche degage l'encoche */
    background: var(--bloc);
    color: var(--encre);
    font-size: .5em;
    line-height: 1.25;
    letter-spacing: .04em;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 1em 50%);
    transition: background-color .2s;
}

/* La pointe detachee, a trois pixels de l'encoche qui l'accueille. */
.cartouche-mention::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(100% + 3px);
    width: 1em;
    background: var(--bloc);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    transition: background-color .2s;
}

.cartouche:hover,
.cartouche:focus-visible { --bloc: #524e47; }

.cartouche:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 3px;
}

.assistance .note {
    margin: 0;
    font-size: .8rem;
    opacity: .72;
}

.assistance .note + .note { margin-top: .55rem; }

@media (prefers-reduced-motion: reduce) {
    .cartouche-mention,
    .cartouche-mention::before { transition: none; }
}

/* ---------- apparition ---------- */

@keyframes fondu {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.entree.apparait { animation: fondu .45s ease-out both; }

@media (prefers-reduced-motion: reduce) {
    .entree.apparait { animation: none; }
    .bouton { transition: none; }
}

/* ---------- petits ecrans ---------- */

@media (max-width: 34rem) {
    /* Le cartouche doit tenir d'un bord a l'autre sur un telephone etroit. */
    .assistance .numero { font-size: .95rem; }

    .entree {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    /* Seuls la lettrine et le mot-vedette restent centrés : une définition
       centrée sur trois lignes se lit mal. */
    .etym,
    .def,
    .ex {
        text-align: left;
    }

    .ex { padding-left: .9rem; }
}